1. 基本介紹

RaisedButton 是一個非常常用的組件悍汛，有很多屬性來設(shè)置按鈕的各個狀態(tài)，非常方便在张。美中不足的是用含，按鈕無法直接設(shè)置 enable，disable 屬性帮匾，很不人性化啄骇。但是按鈕的狀態(tài)設(shè)置是一個非常常用的功能，下文會介紹如何實現(xiàn)按鈕的狀態(tài)設(shè)置瘟斜。

2. 示例代碼

代碼下載地址缸夹。如果對你有幫助的話記得給個關(guān)注，代碼會根據(jù)我的 Flutter 專題不斷更新螺句。

3. RaisedButton 使用

3.1 創(chuàng)建容器

優(yōu)雅的編程虽惭，首先創(chuàng)建一個 raisedbutton.dart 文件。
這次和之前的很多文章不同蛇尚，因為 button 是可以動態(tài)改變的趟妥，所以這一次創(chuàng)建一個繼承 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 狀態(tài)疚膊，enable，disable 狀態(tài)的使用

3.4.1 基本介紹

Button 狀態(tài)改變其實是一個很常用的功能虾标，但是在 flutter 里并沒有直接設(shè)置 enable寓盗，disable 的方法。這一點不得不說是美中不足的地方，flutter 里的 button 在 onPressed : null 并且 onLongPress : null 時傀蚌，會認為 button 處于 disabled 狀態(tài)基显，會顯示設(shè)置的 disabledColor 等。

3.4.2 創(chuàng)建一個可改變狀態(tài)的 button

我們先聲明一個變量 btnEnabled善炫，當值為 true 時撩幽，給第一個 button 的 onPressed 賦值，當值為 false 時箩艺，給第一個 button 的 onPressed 設(shè)置為 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 ? "我現(xiàn)在 enable了":"我現(xiàn)在 disable 了"}'),
        ),
        Padding(padding: EdgeInsets.all(10)),
        RaisedButton(
          onPressed: () {
            btnEnabled = !btnEnabled;
            // 執(zhí)行該方法會刷新頁面
            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 設(shè)置背景圖，然后利用 Row 實現(xiàn)左邊頭像盛垦，右邊文字的布局湿弦，然后右側(cè)文字使用 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. 技術(shù)小結(jié)

基本Button的使用颊埃，背景色，文字顏色蝶俱，文字設(shè)置班利、點擊事件。
特殊Button的使用榨呆，圓角罗标，球場形，圓形等button使用，應(yīng)用比較廣泛闯割。
Button的狀態(tài)改變彻消，enable，disable宙拉，應(yīng)用比較廣泛宾尚。
自定義 Button，了解布局鼓黔，其實可以制定各種樣式的 button央勒。

Flutter入門（12）：Flutter 組件之 RaisedButton 詳解