本文开始 将学习一些交互操作了,一个应用不可能就是展示,肯定需要和用户交互
本文将学习点击事件 GestureDetector,
不用说你也知道他是一个widget,他并不具有显示效果,而是检测由用户做出的手势(点击拖动和缩放)
在前面的文中我们学习过ListTitl和一些其他widget,这些widget默认也具有点击事件,还有一些iconButton等widget都具有点击事件,但是还是有很多widget不具有点击事件
GestureDetector闪亮登场,使用GestureDetector作为其父项即可
本文使用一个点击小案例来演示,单击 双击 长按
import 'package:flutter/material.dart'; //GestureDetector 处理手势 // Center控件使其子控件在中间位置 // Text控件显示各种文本 // runApp函数将根控件显示在屏幕上 void main(){ runApp(new MaterialApp( title: "我的应用!", home: new MyButton(), ) ); } class MyButton extends StatelessWidget{ @override Widget build(BuildContext context) { //GestureDetector并不具有显示效果,而是检测由用户做出的手势(点击拖动和缩放) return new GestureDetector( //发生点击事件后回调 onTap: (){ print("你好!"); }, //发生双击时回调 onDoubleTap: (){ print("你好你好!"); }, //长按事件 onLongPress: (){ print("你好你好你好你好你好哈哈哈哈!"); }, child: new Container( height: 36.0, //EdgeInsets 这个类通过他可以很好的控制widget上下左右的偏移量 // 有.all全部设置 也有.symmetric水平和垂直可选 也有.only上下左右可选 //这里的padding对Center是操作无效的 但如果改为EdgeInsets.only(left:8.0),就可以看到明显的偏移 padding: const EdgeInsets.all(8.0), //上下左右都偏移8像素边距 margin: const EdgeInsets.symmetric(horizontal: 8.0), //symmetric的参数是可选的 水平方向 //背景装饰 decoration: new BoxDecoration( //圆角和颜色 borderRadius: new BorderRadius.circular(5.0), color: Colors.deepOrange ), child: new Center( child: new Text("点击监听!", style:new TextStyle(color: Colors.white), ), ), ), ); } }