Flutter教學(xué)目錄持續(xù)更新中

github源代碼持續(xù)更新中

1.Button簡介

Flutter 里有很多的 Button 組件很多，常見的按鈕組件有：

• RaisedButton ：凸起的按鈕，其實就是 Material Design 風(fēng)格的 Button
• FlatButton ：扁平化的按鈕
• OutlineButton：線框按鈕
• IconButton ：圖標(biāo)按鈕
• ButtonBar：按鈕組
• FloatingActionButton:浮動按鈕

2.常用屬性

按鈕組件有以下常用屬性：

• onPressed ：必填參數(shù)，按下按鈕時觸發(fā)的回調(diào)，接收一個方法，傳 null 表示按鈕禁用，會顯示禁用相關(guān)樣式
• child ：可以放入wight
• textColor ：文本顏色
• color ：文本顏色
• disabledColor ：按鈕禁用時的顏色
• disabledTextColor ：按鈕禁用時的文本顏色
• splashColor ：點擊按鈕時水波紋的顏色
• highlightColor ：點擊（長按）按鈕后按鈕的顏色
• elevation ：陰影的范圍，值越大陰影范圍越大
• padding ：內(nèi)邊距
• shape ：設(shè)置按鈕的形狀

3.圓角按鈕

這里我們用RaisedButton演示，其實這幾個Button都差不多，只是各自有一個獨特的初始化屬性而已，比如RaisedButton就是自帶圓角，有水波紋特效，帶陰影等屬性

1600597223(1).png

 Center(
            child: RaisedButton(
              padding: EdgeInsets.all(10),
              child: Text('圓角button'),
              elevation: 10,
              textColor: Colors.blue,
              highlightColor: Colors.red,
              onPressed: () {
                ToastUtil.showToast('click button');
              },
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),

4.圓形按鈕

這里順便看一下按鈕是可以設(shè)置禁用屬性的，這時候知道點擊時間給null就表示按鈕不可用，那么按鈕的風(fēng)格就是disabled設(shè)置的樣式

1600597238(1).png

 Container(
            padding: EdgeInsets.all(10),
            color: Colors.red,
            height: 100,
            child: RaisedButton(
              padding: EdgeInsets.all(10),
              child: Text('圓形button'),
              disabledColor: Colors.grey,
              disabledElevation: 5,
              elevation: 10,
              disabledTextColor: Colors.white,
              textColor: Colors.blue,
              highlightColor: Colors.red,
              // onPressed: () {
              //   ToastUtil.showToast('click button');
              // },
              //傳 null 表示按鈕禁用，會顯示禁用相關(guān)樣式
             onPressed: null,
              shape: CircleBorder(
                side: BorderSide(
                  color: Colors.yellow,
                  width: 5,
                ),
              ),
            ),
          ),

5.帶圖片的Button

1600597249(1).png

 Center(
            child: RaisedButton.icon(
                onPressed: () {
                  ToastUtil.showToast('搜索');
                },
                icon: Icon(Icons.search),
                label: Text('搜索')),
          ),
Center(
            child: RaisedButton.icon(
                onPressed: () {
                  ToastUtil.showToast('掃碼');
                },
                icon: Image.asset('images/scan.png'),
                label: Text('掃碼')),
          ),

6.IconButton

這個就是一個顯示圖片的按鈕，默認(rèn)大小是24*24，內(nèi)邊距8，圖片居中顯示，圖片不只是可以放icon，放image也是可以的，icon接受的是widget

1600597528(1).png

Center(
            child: IconButton(
                icon: Icon(Icons.save_alt),
                onPressed: () {
                  ToastUtil.showToast('保存');
                }),
          ),
 Center(
            child: IconButton(
                icon: Image.asset('images/scan.png'),
                onPressed: () {
                  ToastUtil.showToast('保存');
                }),
          ),

7.OutlineButton

一個線框按鈕，默認(rèn)是帶圓角的灰色邊框

1600598020(1).png

 Center(
            child: OutlineButton(
                child: Text('保存'),
                onPressed: () {
                  ToastUtil.showToast('保存');
                }),
          ),

8.FlatButton

一個沒有任何樣式的按鈕，可以給其他widget提供點擊事件

1600598035(1).png

 Center(
            child: FlatButton(
                child: Text('FlatButton'),
                onPressed: () {
                  ToastUtil.showToast('FlatButton');
                }),
          ),

9.FloatingActionButton

浮動按鈕，跟安卓里面的是一樣的，可以配合Scaffold實現(xiàn)很多有意思的布局樣式，還有就是FloatingActionButton如果存在多個需要指定heroTag

1600598045(1).png

Center(
            child: FloatingActionButton(
                child: Text('FloatingActionButton'),
                onPressed: () {
                  ToastUtil.showToast('FloatingActionButton');
                }),
          ),
Center(
            child: FloatingActionButton(
                heroTag: '2',
                child: Icon(Icons.add),
                onPressed: () {
                  ToastUtil.showToast('FloatingActionButton');
                }),
          ),

10.ButtonBar

這里額外介紹一個widget：ButtonBar，它里面可以放多個Button，ButtonBar可以多里面的button做統(tǒng)一樣式處理

1600598788(1).png

Container(
            child: ButtonBar(
              buttonPadding: EdgeInsets.all(10),
              buttonHeight: 50,
              alignment: MainAxisAlignment.start,
              buttonTextTheme: ButtonTextTheme.primary,
              layoutBehavior: ButtonBarLayoutBehavior.padded,
              children: [
                RaisedButton(
                  child: Text('button1'),
                  onPressed: () {
                    ToastUtil.showToast('button1');
                  },
                ),
                RaisedButton(
                  child: Text('button2'),
                  onPressed: () {
                    ToastUtil.showToast('button2');
                  },
                ),
                RaisedButton(
                  child: Text('button3'),
                  onPressed: () {
                    ToastUtil.showToast('button3');
                  },
                ),
              ],
            ),
          ),

下一節(jié)：基礎(chǔ)組件之Scaffold

Flutter（10）：基礎(chǔ)組件之Scaffold

Flutter教學(xué)目錄持續(xù)更新中

github源代碼持續(xù)更新中