Flutter GestureDetector

Flutter GestureDetector进行手势检测GestureDetector可以进行手势检测,比如点击一次、双击、长按、垂直拖动及水平拖动等。这些手势的事件名及描述如表所示:
Flutter 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 GestureDetector

酷客教程相关文章:

赞(0)

评论 抢沙发

评论前必须登录!