Flutter 基础组件：按钮

前言

Material组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等，它们都是直接或间接对RawMaterialButton组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。

有Material 库中的按钮都有如下相同点：

1. 按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按钮上会出现水波荡漾的动画）。
2. 有一个onPressed属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

实例

// 按钮
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class Buttons extends StatelessWidget {
  bool _active = false;
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buttons'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            // RaisedButton，即"漂浮"按钮，默认带有阴影和灰色背景。按下后，阴影会变大。
            RaisedButton(
              child: Text(_active ? 'active' : 'normal'),
              onPressed: () {
                _active = !_active;
                print('RaisedButton按下！');
              },
            ),
            // FlatButton，即扁平按钮，默认背景透明并不带阴影。按下后，会有背景色。
            FlatButton(
              child: Text(_active ? 'active' : 'normal'),
              onPressed: () {
                _active = !_active;
                print('FlatButton按下！');
              },
            ),
            // OutlineButton，默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。
            OutlineButton(
              child: Text(_active ? 'active' : 'normal'),
              onPressed: () {
                _active = !_active;
                print('OutlineButton按下！');
              },
            ),
            // IconButton，是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。
            IconButton(
              icon: Icon(Icons.thumb_up),
              onPressed: () {
                _active = !_active;
                print('IconButton按下！');
              },
            ),
            // RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮。
            RaisedButton.icon(
                onPressed: () {
                  _active = !_active;
                  print('RaisedButton按下！');
                },
                icon: Icon(Icons.send),
                label: Text('发送'),
            ),
            FlatButton.icon(
                onPressed: () {
                  _active = !_active;
                  print('FlatButton按下！');
                },
                icon: Icon(Icons.add),
                label: Text('添加'),
            ),
            OutlineButton.icon(
                onPressed: () {
                  _active = !_active;
                  print('OutlineButton按下！');
                },
                icon: Icon(Icons.info),
                label: Text('详情'),
            ),
            // 自定义按钮外观
            // 定义一个蓝色背景，两边圆角的按钮
            FlatButton(
              color: Colors.blue,
              // 去除背景
//              color: Color(0x000000),
              highlightColor: Colors.blue[700],
              colorBrightness: Brightness.dark,
              splashColor: Colors.red,
              child: Text('Submit'),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
              onPressed: () {
                _active = !_active;
                print('FlatButton按下！');
              },
            ),
          ],
        ),
      ),
    );
  }
}