【自学Flutter】27.4 手势识别（GestureRecognizer的使用）

最新推荐文章于 2022-08-03 10:36:20 发布

技术宅-Nopi

最新推荐文章于 2022-08-03 10:36:20 发布

阅读量5.3k

点赞数 1

分类专栏：自学Flutter 文章标签： Flutter Android

本文链接：https://blog.youkuaiyun.com/weixin_43266090/article/details/94362960

版权

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了一个使用Flutter的GestureRecognizer实现手势识别的例子，通过TapGestureRecognizer监听点击事件，改变TextSpan中的文字颜色，展示了如何在Flutter中集成手势识别功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

27.4 手势识别（GestureRecognizer的使用）

1.源代码

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

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
  bool flag = false;

  @override
  void dispose() {
    tapGestureRecognizer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("手势检测"),),
          body: Center(
              child: Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "我是一个"
                    ),
                    TextSpan(
                      text: "点我变色",
                      style: TextStyle(fontSize: 20.0,color: flag ? Colors.red : Colors.blue),
                      recognizer: tapGestureRecognizer..onTap = (){
                        setState(() {
                          flag = !flag;
                        });
                      },
                    ),
                    TextSpan(
                        text: "的TextSpan！"
                    ),
                  ]
                )
              ),
              )
          ),
    );
  }
}

2.解释源代码

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

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  //声明一个TapGestureRecognizer
  //导包import 'package:flutter/gestures.dart';
  TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
  //是否变色标识
  bool flag = false;

  //使用GestureRecognizer后一定要调用其dispose()方法来释放资源（主要是取消内部的计时器）
  @override
  void dispose() {
    tapGestureRecognizer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("手势检测"),),
          body: Center(
              child: Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "我是一个"
                    ),
                    TextSpan(
                      text: "点我变色",
                      style: TextStyle(fontSize: 20.0,color: flag ? Colors.red : Colors.blue),
                      recognizer: tapGestureRecognizer..onTap = (){
                        setState(() {
                          flag = !flag;
                        });
                      },
                    ),
                    TextSpan(
                        text: "的TextSpan！"
                    ),
                  ]
                )
              ),
              )
          ),
    );
  }
}

3.效果图

在这里插入图片描述