1. 基本介绍

RaisedButton 是一个非常常用的组件，有很多属性来设置按钮的各个状态，非常方便。美中不足的是，按钮无法直接设置 enable，disable 属性，很不人性化。但是按钮的状态设置是一个非常常用的功能，下文会介绍如何实现按钮的状态设置。

2. 示例代码

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

3. RaisedButton 使用

3.1 创建容器

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

import 'package:flutter/material.dart';

class FMRaisedButtonVC extends StatefulWidget {
  FMRaisedButtonVC({Key key}) : super(key: key);
  @override
  FMRaisedButtonState createState() => FMRaisedButtonState();
}

class FMRaisedButtonState extends State<FMRaisedButtonVC> {
  var btnEnabled = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('RaisedButton'),
          backgroundColor: Colors.lightBlue,
        ),
        body: _listView(),
      ),
    );
  }

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

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

button style.png

3.2 button 的点击事件

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

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

button press.png

button long press.png

3.3 button 形状、边框

3.3.1 圆形

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

  Column _shapeColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('shape button'),
        ),
        RaisedButton(
          color: Colors.blue,
          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,
            ),
          ),
        ),
      ],
    );
  }

shape circle solid.png

shape circle none.png

3.3.2 边缘圆形（球场形状）

  Column _shapeColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('shape button'),
        ),
        RaisedButton(
          color: Colors.blue,
          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)),
        RaisedButton(
          color: Colors.blue,
          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,
            ),
          ),
        ),
      ],
    );
  }

shape stadium solid.png

shape stadium none.png

3.3.3 圆角

  Column _shapeColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('shape button'),
        ),
        RaisedButton(
          color: Colors.blue,
          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)),
        RaisedButton(
          color: Colors.blue,
          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)),
        RaisedButton(
          color: Colors.blue,
          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,
            ),
          ),
        ),
      ],
    );
  }

shape roundrect solid.png

shape roundrect 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;

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

  Column _statefulColumn(){
    return Column(
      children: [
        Container(
          height: 30,
          alignment: Alignment.centerLeft,
          child: Text('stateful button'),
        ),
        Padding(padding: EdgeInsets.all(10)),
        RaisedButton(
          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)),
        RaisedButton(
          onPressed: () {
            btnEnabled = !btnEnabled;
            // 执行该方法会刷新页面
            setState(() {
              
            });
          },
          textColor: Colors.white,
          color: Colors.blue,
          highlightColor: Colors.yellow,
          child: Text('点我可以控制上边那家伙'),
        ),
      ],
    );
  }

stateful button enable.png

stateful button disable.png

3.5 自定义 button

3.5.1 简单介绍

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

  ListView _listView(){
    return ListView(
      padding: EdgeInsets.all(20),
      children: [
        _button(),
        _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,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

custom button.png

4. 技术小结

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

Flutter入门（12）：Flutter 组件之 RaisedButton 详解