Flutter：如何在Text Widget中添加跳转至新视图的导航链接

嘿，你遇到的问题很典型——用Column的话，它是垂直方向的布局容器，三个子组件会上下排列，自然没法实现HTML里那种行内链接的效果。要达到类似<a>标签的行内可点击文本，我们应该用RichText配合TextSpan来实现，这才是Flutter里处理富文本（带样式、可点击片段）的正确姿势。

正确实现代码 #

这里给你一个完整的示例，用StatefulWidget来管理点击手势识别器（避免内存泄漏）：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class InlineLinkDemo extends StatefulWidget {
  const InlineLinkDemo({super.key});

  @override
  State<InlineLinkDemo> createState() => _InlineLinkDemoState();
}

class _InlineLinkDemoState extends State<InlineLinkDemo> {
  late TapGestureRecognizer _tapRecognizer;

  @override
  void initState() {
    super.initState();
    _tapRecognizer = TapGestureRecognizer()
      ..onTap = () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const TargetView()),
        );
      };
  }

  @override
  void dispose() {
    _tapRecognizer.dispose(); // 必须释放，防止内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RichText(
          text: TextSpan(
            // 继承当前上下文的默认文本样式
            style: DefaultTextStyle.of(context).style,
            children: [
              const TextSpan(text: 'This is a '),
              TextSpan(
                text: 'sample',
                style: const TextStyle(
                  color: Colors.blue,
                  decoration: TextDecoration.underline,
                ),
                recognizer: _tapRecognizer, // 绑定点击跳转逻辑
              ),
              const TextSpan(text: ' text'),
            ],
          ),
        ),
      ),
    );
  }
}

// 跳转目标页面示例
class TargetView extends StatelessWidget {
  const TargetView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Target View')),
      body: const Center(child: Text('You reached the target page!')),
    );
  }
}

关键要点解释 #

• RichText + TextSpan：RichText允许你在一段文本里混合不同样式、不同交互逻辑的文本片段，TextSpan就是用来定义这些独立片段的核心组件。
• TapGestureRecognizer：专门用来处理文本片段的点击事件，必须在dispose方法中释放它，否则会造成内存泄漏。
• 视觉样式模拟：通过color: Colors.blue和decoration: TextDecoration.underline还原HTML链接的视觉效果，你可以根据需求自定义颜色、下划线样式等。

内容的提问来源于stack exchange，提问作者Sachith Rukshan