Flutter GestureDetector

Flutter GestureDetector进行手势检测，GestureDetector可以进行手势检测，比如点击一次、双击、长按、垂直拖动及水平拖动等。这些手势的事件名及描述如表所示：

假设我们想要制作一个自定义按钮，当点击时显示文字“你已按下”。我们如何解决这个问题？请看以下示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: '按下处理Demo',
    home: new MyApp(),
  ));
}

class MyButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    // 一定要把被触摸的组件放在GestureDetector中
    return new GestureDetector(
      onTap: (){
        // 底部消息揭示
        final snackBar = new SnackBar(content: new Text("你已按下"),);
        Scaffold.of(context).showSnackBar(snackBar);
      },
      // 添加容器接收触摸动作
      child: new Container(
        padding: new EdgeInsets.all(12.0),
        decoration: new BoxDecoration(
          color: Theme.of(context).buttonColor,
          borderRadius: new BorderRadius.circular(10.0),
        ),
        child: new Text('测试按钮'),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new Scaffold(
        appBar: new AppBar(
          title: new Text('按下处理Demo'),
        ),
        body:new Center(child: new MyButton(),)
    );
  }
}

上述示例代码展示如图所示，图A为用户没有点击测试按钮的状态，当用户点击了测试按钮后，会弹出提示“你已按下”，如图B所示：

酷客教程相关文章：

• Flutter 按宽高自动换行布局
• Flutter 控制是否显示组件
• Flutter 基准线布局
• Flutter 矩阵转换