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

一、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>[

 MaterialButton(
    height: Screen.width(height: 85),
    color: ColorGather.colorMain(),
    textColor: Colors.white,
    elevation: 2.0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(Screen.width(8)))
    ),
    child: Text('確認', style: TextStyle(fontSize: Screen.width(28)),),
    onPressed:() {},
  ),

            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 ,
      ),
    );
  }
}