我们不仅希望向用户展示信息，还希望我们的用户与我们的应用互动！那么，我们如何响应用户基本操作，如点击和拖动？ 在Flutter中我们可以使用GestureDetector Widget！

假设我们想要创建一个自定义按钮，当点击时显示一个SnackBar。我们如何解决这个问题？

步骤

  1. 创建一个button。
  2. 把它包装在 GestureDetector中并提供一个onTap回调。
  1. // Our GestureDetector wraps our button
  2. new GestureDetector(
  3.   // When the child is tapped, show a snackbar 
  4.   onTap: () {
  5.     final snackBar = new SnackBar(content: new Text("Tap"));
  7.     Scaffold.of(context).showSnackBar(snackBar);
  8.   },
  9.   // Our Custom Button!
  10.   child: new Container(
  11.     padding: new EdgeInsets.all(12.0),
  12.     decoration: new BoxDecoration(
  13.       color: Theme.of(context).buttonColor,
  14.       borderRadius: new BorderRadius.circular(8.0),
  15.     ),
  16.     child: new Text('My Button'),
  17.   ),
  18. );

注意

  1. 如果您想将Material 水波效果添加到按钮中，请参阅”添加Material 触摸水波“ 。
  2. 虽然我们已经创建了一个自定义按钮来演示这些概念，但Flutter也提供了一些其它开箱即用的按钮：RaisedButton、FlatButton和CupertinoButton。

完整的例子

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(new MyApp());
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     final title = 'Gesture Demo';
  10.     return new MaterialApp(
  11.       title: title,
  12.       home: new MyHomePage(title: title),
  13.     );
  14.   }
  15. }
  17. class MyHomePage extends StatelessWidget {
  18.   final String title;
  20.   MyHomePage({Key key, this.title}) : super(key: key);
  22.   @override
  23.   Widget build(BuildContext context) {
  24.     return new Scaffold(
  25.       appBar: new AppBar(
  26.         title: new Text(title),
  27.       ),
  28.       body: new Center(child: new MyButton()),
  29.     );
  30.   }
  31. }
  33. class MyButton extends StatelessWidget {
  34.   @override
  35.   Widget build(BuildContext context) {
  36.     // Our GestureDetector wraps our button
  37.     return new GestureDetector(
  38.       // When the child is tapped, show a snackbar
  39.       onTap: () {
  40.         final snackBar = new SnackBar(content: new Text("Tap"));
  42.         Scaffold.of(context).showSnackBar(snackBar);
  43.       },
  44.       // Our Custom Button!
  45.       child: new Container(
  46.         padding: new EdgeInsets.all(12.0),
  47.         decoration: new BoxDecoration(
  48.           color: Theme.of(context).buttonColor,
  49.           borderRadius: new BorderRadius.circular(8.0),
  50.         ),
  51.         child: new Text('My Button'),
  52.       ),
  53.     );
  54.   }
  55. }