Flutter学习 — 处理点击

效果图一：

点击按钮

效果图二：

显示底部弹出框

代码+注释：

import 'package:chapter02one/Api.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Gesture Demo';

    return new MaterialApp(
      title: title,
      home: new MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(child: new MyButton()),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Our GestureDetector wraps our button
    ///我们的GestureDetector包裹了我们的按钮
    return new GestureDetector(
      // When the child is tapped, show a snackbar
      ///监听器
      onTap: () {
        /**
         * 准备: 底部弹出框对象
         * content 是一个组件,可以是自定义的任何类型组件,也可以是复合型组合组件,例如Column
         */
        final snackBar = new SnackBar(content: Text('底部弹出框呀'));
        // 显示 SnackBar
        Scaffold.of(context).showSnackBar(snackBar);
      },
      // Our Custom Button!
      child: new Container(
        padding: new EdgeInsets.all(12.0),
        decoration: new BoxDecoration(
          color: Theme.of(context).buttonColor,
          borderRadius: new BorderRadius.circular(8.0),
        ),
        child: new Text('My Button'),
      ),
    );
  }
}

喜欢记得点个赞哟，我是王睿，很高兴认识大家！

更多原理请参考谷歌官网：处理点击