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

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.效果图