flutter - 给文字设置点击事件的几种方式

Text 部件 不能直接设置点击事件

1. 如果单独给 一个文字设置 点击事件， 可以使用TextSpan 部件

• 点击 word 文字添加事件

class MyHomePage extends StatelessWidget {
  var i = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Container(
            child: Text.rich(
              TextSpan(
                children: [
                  TextSpan(
                    text: "hello",
                    style: TextStyle(fontSize: 29, color: Colors.red),
                  ),
                  TextSpan(
                    text: "world",
                    style: TextStyle(fontSize: 59, color: Colors.yellow),
                    // 设置点击事件
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        debugPrint("${i++}");
                      },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. 使用 InkWell 给文字添加水波纹高亮效果 点击 事件

注意：如果给 Container 添加上了 背景色， 将会看不到高亮效果， 一些配置高亮颜色的参数，将会看不到效果

class MyHomePage extends StatelessWidget {
  var i = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Center(
            child: InkWell(
              child: Container(
                padding:
                    EdgeInsets.only(left: 10, right: 10, bottom: 10, top: 5),
                child: Text("自定义点击"),
                decoration: BoxDecoration(
                  border: Border.all(width: 1, color: Colors.blue),
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
              highlightColor: Colors.blue,
              splashColor: Colors.red,
              onTap: () {
                print('${i++}');
              },
            ),
          )
        ],
      ),
    );
  }

• 比如如下这样的， 点击后， 水波纹效果将不再有效果
  

3. 设置带背景色 的高亮水波纹 效果（Material 和 InkWeel 组合使用）

class MyHomePage extends StatelessWidget {
  var i = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Center(
            child: Container(
              margin: EdgeInsets.all(20),
              child: Material(
                color: Colors.red,
                child: InkWell(
                  child: Container(
                    padding: EdgeInsets.only(
                      left: 10,
                      right: 10,
                      bottom: 10,
                      top: 5,
                    ),
                    child: Text("自定义点击"),
                  ),
                  onTap: () {
                    print('${i++}');
                  },
                ),
              ),
              decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.blue),
                borderRadius: BorderRadius.circular(5),
              ),
            ),
          )
        ],
      ),
    );
  }
}