Flutter入门（22）：Flutter 组件之 FlatButton 详解

1. 基本介绍

FlatButton 是一个 google 风格的扁平化按钮，使用方法与 Flutter 组件之 RaisedButton 详解 一致，这里就按照 RaisedButton 的讲解方式过一遍样式。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. FlatButton 使用

3.1 创建容器

优雅的编程，首先创建一个 flatbutton.dart 文件。
这次和之前的很多文章不同，因为 button 是可以动态改变的，所以这一次创建一个继承 StatefulWidget 的 class。

import 'package:flutter/material.dart';

class FMFlatButtonVC extends StatefulWidget{
  @override
  FMFlatButtonState createState() => FMFlatButtonState();
}

class FMFlatButtonState extends State{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("FlatButton"),
      ),
      body: _listView(),
    );
  }

  ListView _listView(){
    return ListView(
      padding: EdgeInsets.all(20),
      children: [
        normalFlatButton(),
      ],
    );
  }

  FlatButton normalFlatButton(){
    return FlatButton(
      child: Text("我是一个按钮"),
      color: Colors.blue,
      textColor: Colors.white,
    );
  }
}

flat button.png

3.2 button 的点击事件

我们给 button 增加一个点击事件，一个高亮事件，一个长按事件。

  FlatButton normalFlatButton(){
    return FlatButton(
      onPressed: (){
        print("点击了 button");
      },
      onLongPress: (){
        print("长按了 button");
      },
      onHighlightChanged: (bool b){
        print(b ? "button 高亮了" : "button 不亮了");
      },
      child: Text("我是一个按钮"),
      color: Colors.blue,
      textColor: Colors.white,
    );
  }

flat button pressed.png

3.3 button 形状、边框

注意：与 raisedButton 不同的是，FlatButton 在不设置 onPressed 事件时，默认不可点击背景色为透明色，默认不可点击text颜色为灰色。

3.3.1 圆形

  ListView _listView(){
    return ListView(
      padding: EdgeInsets.all(20),
      children: [
        normalFlatButton(),
        _shapeColumn(),
      ],
    );
  }

  Column _shapeColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('shape button'),
        ),
        FlatButton(
          color: Colors.grey,
          textColor: Colors.white,
          child: Container(
            height: 100,
            width: 100,
            child: Text('圆的'),
            alignment: Alignment.center,
          ),
          shape: CircleBorder(
            side: BorderSide(
              width: 2,
              color: Colors.red,
              style: BorderStyle.solid,
              // style: BorderStyle.none,
            ),
          ),
        ),
      ],
    );
  }

flatbutton circle solid.png

flatbutton circle solid.png

3.3.2 边缘圆形（球场形状）

  Column _shapeColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('shape button'),
        ),
        FlatButton(
          color: Colors.grey,
          textColor: Colors.white,
          child: Container(
            height: 100,
            width: 100,
            child: Text('圆的'),
            alignment: Alignment.center,
          ),
          shape: CircleBorder(
            side: BorderSide(
              width: 2,
              color: Colors.red,
              style: BorderStyle.solid,
              // style: BorderStyle.none,
            ),
          ),
        ),
        Padding(padding: EdgeInsets.all(10)),
        FlatButton(
          onPressed: (){},
          color: Colors.green,
          textColor: Colors.white,
          child: Container(
            height: 60,
            width: 200,
            child: Text('球场的'),
            alignment: Alignment.center,
          ),
          shape: StadiumBorder(
            side: BorderSide(
              width: 2,
              color: Colors.red,
              // style: BorderStyle.solid,
              style: BorderStyle.none,
            ),
          ),
        ),
      ],
    );
  }

flat button stadium solid.png

flat button stadium none.png

3.3.3 圆角

  Column _shapeColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('shape button'),
        ),
        FlatButton(
          color: Colors.grey,
          textColor: Colors.white,
          child: Container(
            height: 100,
            width: 100,
            child: Text('圆的'),
            alignment: Alignment.center,
          ),
          shape: CircleBorder(
            side: BorderSide(
              width: 2,
              color: Colors.red,
              style: BorderStyle.solid,
              // style: BorderStyle.none,
            ),
          ),
        ),
        Padding(padding: EdgeInsets.all(10)),
        FlatButton(
          onPressed: (){},
          color: Colors.green,
          textColor: Colors.white,
          child: Container(
            height: 60,
            width: 200,
            child: Text('球场的'),
            alignment: Alignment.center,
          ),
          shape: StadiumBorder(
            side: BorderSide(
              width: 2,
              color: Colors.red,
              // style: BorderStyle.solid,
              style: BorderStyle.none,
            ),
          ),
        ),
        Padding(padding: EdgeInsets.all(10)),
        FlatButton(
          onPressed: (){},
          color: Colors.green,
          textColor: Colors.white,
          child: Container(
            height: 60,
            width: 200,
            child: Text('圆角的'),
            alignment: Alignment.center,
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
            side: BorderSide(
              width: 2,
              color: Colors.red,
              // style: BorderStyle.solid,
              style: BorderStyle.none,
            ),
          ),
        ),
      ],
    );
  }

flat button rectangle solid.png

flat button rectangle none.png

3.4 button 状态，enable，disable 状态的使用

3.4.1 基本介绍

Button 状态改变其实是一个很常用的功能，但是在 flutter 里并没有直接设置 enable，disable 的方法。这一点不得不说是美中不足的地方，flutter 里的 button 在 onPressed : null 并且 onLongPress : null 时，会认为 button 处于 disabled 状态，会显示设置的 disabledColor 等。

3.4.2 创建一个可改变状态的 button

我们先声明一个变量 btnEnabled，当值为 true 时，给第一个 button 的 onPressed 赋值，当值为 false 时，给第一个 button 的 onPressed 设置为 null。然后点击另一个按钮时，改变 btnEnabled 值，相互取反，利用 setState(){}; 方法来刷新页面，完成预期效果。

  var btnEnabled = true;

  FlatButton normalFlatButton(){
    return FlatButton(
      onPressed: (){
        print("点击了 button");
      },
      onLongPress: (){
        print("长按了 button");
      },
      onHighlightChanged: (bool b){
        print(b ? "button 高亮了" : "button 不亮了");
      },
      child: Text("我是一个按钮"),
      color: Colors.blue,
      textColor: Colors.white,
    );
  }

  Column _statefulColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('stateful button'),
        ),
        Padding(padding: EdgeInsets.all(10)),
        FlatButton(
          onPressed: btnEnabled ? (){} : null,
          textColor: Colors.white,
          color: Colors.blue,
          highlightColor: Colors.yellow,
          disabledColor: Colors.grey,
          child: Text('${btnEnabled ? "我现在 enable了":"我现在 disable 了"}'),
        ),
        Padding(padding: EdgeInsets.all(10)),
        FlatButton(
          onPressed: () {
            btnEnabled = !btnEnabled;
            // 执行该方法会刷新页面
            setState(() {

            });
          },
          textColor: Colors.white,
          color: Colors.blue,
          highlightColor: Colors.yellow,
          child: Text('点我可以控制上边那家伙'),
        ),
      ],
    );
  }

FlatButton enable.gif

3.5 自定义 button

3.5.1 简单介绍

在实际项目里，这种文字，特殊形状 button 能满足大部分需求，但肯定不是所有需求。有的按钮需要添加图片，头像，文字等比较复杂的样式。
其实思路很简单，button 的 child 属性可以使用 Container、Row、Column 等组件来组合出一个复杂的效果。
接下来我这边提供一个示例，利用 Container 设置背景图，然后利用 Row 实现左边头像，右边文字的布局，然后右侧文字使用 Column 布局，完成上方和下方两行文字的布局。

  ListView _listView(){
    return ListView(
      padding: EdgeInsets.all(20),
      children: [
        normalFlatButton(),
        _shapeColumn(),
        _statefulColumn(),
        _customColumn(),
      ],
    );
  }

  Column _customColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('custom button'),
        ),
        Padding(padding: EdgeInsets.all(10)),
        RaisedButton(
          child: Container(
            height: 200,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
              ),
            ),
            child: Row(
              children: [
                Container(
                  width: 150,
                  height: 150,
                  color: Colors.red,
                  child: Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(
                      '主标题',
                      style: TextStyle(
                        fontSize: 35,
                        color: Colors.red,
                      ),
                    ),
                    Text(
                      '副标题',
                      style: TextStyle(
                        fontSize: 30,
                        color: Colors.green,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

flatbutton custom.png

4. 技术小结

• 基本Button的使用，背景色，文字颜色，文字设置、点击事件。
• 特殊Button的使用，圆角，球场形，圆形等button使用，应用比较广泛。
• Button的状态改变，enable，disable，应用比较广泛。
• 自定义 Button，了解布局，其实可以制定各种样式的 button。