Flutter 中的常見的按鈕組件 以及自定義按鈕組件

Flutter 里有很多的 Button 組件很多，常見的按鈕組件有:RaisedButton、FlatButton、

IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。

RaisedButton :凸起的按鈕，其實就是 Material Design 風格的 Button FlatButton :扁平化的按鈕
OutlineButton:線框按鈕
IconButton :圖標按鈕

ButtonBar:按鈕組 FloatingActionButton:浮動按鈕

 

---

 

Flutter 按鈕組件中的一些屬性

 

屬性名稱	值類型	屬性值
onPressed	VoidCallback ，一般接收一個 方法	必填參數，按下按鈕時觸發的回調，接收一個 方法，傳 null 表示按鈕禁用，會顯示禁用相關 樣式
child	Widget	文本控件

textColor	Color	文本顏色
color	Color	按鈕的顏色
disabledColor	Color	按鈕禁用時的顏色
disabledTextColor	Color	按鈕禁用時的文本顏色
splashColor	Color	點擊按鈕時水波紋的顏色
highlightColor	Color	點擊(長按)按鈕后按鈕的顏色
elevation	double	陰影的范圍，值越大陰影范圍越大
padding		內邊距
shape		設置按鈕的形狀   shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ) shape: CircleBorder( side: BorderSide( color: Colors.white, ) )

import 'package:flutter/material.dart';

class ButtonDemoPage extends StatelessWidget {
  const ButtonDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("按鈕演示頁面"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: (){

              },
            )
          ],
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('普通按鈕'),
                  onPressed: () {
                    print("普通按鈕");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton(
                  child: Text('顏色按鈕'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  onPressed: () {
                    print("有顏色按鈕");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton(
                  child: Text('陰影按鈕'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  onPressed: () {
                    print("有陰影按鈕");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton.icon(
                    icon: Icon(Icons.search),
                    label: Text('圖標按鈕'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    // onPressed: null,
                    onPressed: () {
                      print("圖標按鈕");
                    })
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 50,
                  width: 400,
                  child: RaisedButton(
                    child: Text('寬度高度'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: () {
                      print("寬度高度");
                    },
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 60,
                    margin: EdgeInsets.all(10),
                    child: RaisedButton(
                      child: Text('自適應按鈕'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("自適應按鈕");
                      },
                    ),
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                    child: Text('圓角按鈕'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                    onPressed: () {
                      print("圓角按鈕");
                    }),
                Container(
                  height: 80,
                  child: RaisedButton(
                      child: Text('圓形按鈕'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      splashColor: Colors.red,
                      shape:
                          CircleBorder(side: BorderSide(color: Colors.white)),
                      onPressed: () {
                        print("圓形按鈕");
                      }),
                ),
                FlatButton(
                  child: Text("按鈕"),
                  color: Colors.blue,
                  textColor: Colors.yellow,
                  onPressed: () {
                    print('FlatButton');
                  },
                ),
                SizedBox(width: 10),
                OutlineButton(
                    child: Text("按鈕"),
                    //  color: Colors.red,  //沒有效果
                    //  textColor: Colors.yellow,
                    onPressed: () {
                      print('FlatButton');
                    })
              ],
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(20),
                    height: 50,
                    child: OutlineButton(child: Text("注冊"), onPressed: () {}),
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                ButtonBar(
                  children: <Widget>[

                    RaisedButton(
                      child: Text('登錄'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("寬度高度");
                      },
                    ),
                    RaisedButton(
                      child: Text('注冊'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("寬度高度");
                      },
                    ),
                    MyButton(text: "自定義按鈕",height: 60.0,width: 100.0,pressed: (){
                      print('自定義按鈕');
                    })
                    
                  ],
                )
              ],
            )
          ],
        ));
  }
}


//自定義按鈕組件

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final width;
  final height;
  const MyButton({this.text='',this.pressed=null,this.width=80,this.height=30}) ;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed:this.pressed ,
      ),
    );
  }
}