【自学Flutter】27.1 手势识别（点击、双击、长按）

27.1 手势识别（点击、双击、长按）

1.源代码

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {

  String textInfo ="默认";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("手势检测"),),
        body: Center(
          child: GestureDetector(
            child: Container(
              alignment: Alignment.center,
              color: Colors.blue,
              width: 200.0,
              height: 100.0,
              child: Text(textInfo, style: TextStyle(color: Colors.white),
              ),
            ),
            onTap: (){
              setState(() {
                textInfo = "点击Tap";
              });
            },
            onDoubleTap: (){
              setState(() {
                textInfo = "双击DoubleTap";
              });
            },
            onLongPress: (){
              setState(() {
                textInfo = "长按LongPress";
              });
            },
          ),
        ),
      )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {

  String textInfo ="默认";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("手势检测"),),
        body: Center(
          child: GestureDetector(
            child: Container(
              alignment: Alignment.center,
              color: Colors.blue,
              width: 200.0,
              height: 100.0,
              child: Text(textInfo, style: TextStyle(color: Colors.white),
              ),
            ),
            //点击
            onTap: (){
              setState(() {
                textInfo = "点击Tap";
              });
            },
            //双击
            onDoubleTap: (){
              setState(() {
                textInfo = "双击DoubleTap";
              });
            },
            //长按
            onLongPress: (){
              setState(() {
                textInfo = "长按LongPress";
              });
            },
          ),
        ),
      )
    );
  }
}

3.效果图