Flutter組件學習（5）按鈕Button

目錄

介紹

Button屬性

RaisedButton

FlatButton

OutlineButton

IconButton

自定義按鈕

---

介紹

Material 組件庫中提供了多種按鈕組件如RaisedButton、FlatButton、OutlineButton等，它們都是直接或間接對RawMaterialButton組件的包裝定製，所以他們大多數屬性都和RawMaterialButton一樣。在介紹各個按鈕時我們先介紹其默認外觀，而按鈕的外觀大都可以通過屬性來自定義，我們在後面統一介紹這些屬性。另外，所有Material 庫中的按鈕都有如下相同點：

1. 按下時都會有“水波動畫”（又稱“漣漪動畫”，就是點擊時按鈕上會出現水波盪漾的動畫）。
2. 有一個onPressed屬性來設置點擊回調，當按鈕按下時會執行該回調，如果不提供該回調則按鈕會處於禁用狀態，禁用狀態不響應用戶點擊。

RaisedButton	"漂浮"按鈕，它默認帶有陰影和灰色背景。按下後，陰影會變大
FlatButton	扁平按鈕，默認背景透明並不帶陰影。按下後，會有背景色
OutlineButton	默認有一個邊框，不帶陰影且背景透明。按下後，邊框顏色會變亮、同時出現背景和陰影(較弱)
IconButton	是一個可點擊的Icon，不包括文字，默認沒有背景，點擊後會出現背景

 

Button屬性

onPressed: () {}	處理點擊事件，我發現如果不寫這句話，按鈕的背景顏色的設置是無效的
child: Text("RaisedButton")	按鈕文字
textColor: Colors.yellow	按鈕文字顏色
color: Colors.blue	按鈕顏色
highlightColor: Colors.orange,	按鈕按下去後的顏色
splashColor: Colors.pink	按鈕水波效果的水波顏色
disabledColor	按鈕被禁用的顏色
disabledTextColor	按鈕禁用時的文本顏色
elevation	陰影的範圍，值越大陰影範圍越大
icon	在按鈕上設置圖標

 需要知道的是讓按鈕按照如下方式添加icon，那麼此時就不再用child添加文字，而是用label

RaisedButton.icon(
  icon: Icon(Icons.send),
  label: Text("按鈕"),
  onPressed: _onPressed,
),
OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("按鈕"),
  onPressed: _onPressed,
),
FlatButton.icon(
  icon: Icon(Icons.info),
  label: Text("按鈕"),
  onPressed: _onPressed,
),

RaisedButton

class ButtonClass extends StatelessWidget{
  _log() {
    print("點擊了按鈕");
  }
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: _log,
      child: Text("RaisedButton"),
      textColor: Colors.yellow,
      color: Colors.blue,
      elevation: 10,
      highlightColor: Colors.orange,
      splashColor: Colors.pink,
    );
  }
}

FlatButton

    return FlatButton(
      onPressed: _log,
      child: Text("FlatButton"),
      textColor: Colors.yellow,
      color: Colors.blue,
      highlightColor: Colors.orange,
      splashColor: Colors.pink,
    );

除了陰影沒有了，和RaisedButton基本上是一樣的，就不再演示了

OutlineButton

    return OutlineButton(
      onPressed: _log,
      child: Text("OutlineButton"),
      textColor: Colors.yellow,
      color: Colors.blue,
      highlightedBorderColor: Colors.blue,
      hoverColor: Colors.blue,
      highlightColor: Colors.orange,
      splashColor: Colors.pink,
    );

這裏color設置的不再是背景顏色，而是按鈕的邊框顏色，且只有點擊的時候纔會顯示

IconButton

    return IconButton(
      onPressed: _log,
      icon: Icon(Icons.ac_unit),
      iconSize: 80,
      color: Colors.red,
      highlightColor: Colors.blue,
    );

不能設置文字，這裏的color設置的是icon的顏色

自定義按鈕

比如我要實現這樣一個按鈕

    return FlatButton.icon(
      onPressed: _log,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      icon: Icon(Icons.phone_forwarded),
      color: Colors.orange,
      highlightColor: Colors.orange,
      label: Text(
          '撥打電話' ,
        style: TextStyle(
          fontSize: 20,
          color: Colors.white
        ),
      ),
    );