Flutter FlatButton 按鈕基本各種用法

Flutter中給我們預先定義好了一些按鈕控件給我們用，常用的按鈕如下

    RaisedButton ：凸起的按鈕，其實就是Android中的Material Design風格的Button ，繼承自MaterialButton
    FlatButton ：扁平化的按鈕，繼承自MaterialButton
    OutlineButton    ：帶邊框的按鈕，繼承自MaterialButton
    IconButton    ：圖標按鈕,繼承自StatelessWidget

我們先來看看MaterialButton中的屬性，可以看到能設置的屬性還是很多的。

  const MaterialButton({
    Key key,
    @required this.onPressed,
    this.onHighlightChanged,
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.highlightColor,
    this.splashColor,
    this.colorBrightness,
    this.elevation,
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.shape,
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child,
  }) : super(key: key);


下面我們來看看常用屬性
屬性     值類型     說明
onPressed     VoidCallback ，一般接收一個方法     必填參數，按下按鈕時觸發的回調，接收一個方法，傳null表示按鈕禁用，會顯示禁用相關樣式
child     Widget     文本控件
textColor     Color     文本顏色
color     Color     按鈕的顏色
disabledColor     Color     按鈕禁用時的顏色
disabledTextColor     Color     按鈕禁用時的文本顏色
splashColor     Color     點擊按鈕時水波紋的顏色
highlightColor     Color     點擊（長按）按鈕后按鈕的顏色
elevation     double     陰影的范圍，值越大陰影范圍越大
padding     EdgeInsetsGeometry （抽象類）     內邊距
shape     ShapeBorder（抽象類）     設置按鈕的形狀
minWidth     double     最小寬度
height     double     高度

而在Android中如果我們要修改按鈕樣式的話，需要通過selector和Shape等方式進行修改，相比較Flutter來說是要麻煩不少的
RaisedButton

RaisedButton的構造方法如下，由於繼承自MaterialButton，所以MaterialButton中的大多數屬性這邊都能用，且效果一致，這里就不在贅述了

  const RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })


下面我們來看一下屬性

onPressed
接收一個方法，點擊按鈕時回調該方法。如果傳null，則表示按鈕禁用

 return RaisedButton(
      onPressed: null,
    );

如下圖所示

 

下面我們定義一個方法傳給onPressed

_log() {
    print("點擊了按鈕");
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: _log,
    );
  }

 

點擊按鈕后會調用log方法。

 

child
按鈕文本控件，一般都是傳一個Text Widget

 return RaisedButton(
      onPressed: _log,
      child: Text("浮動按鈕"),
    );

 

color
按鈕的顏色

return RaisedButton(
      onPressed: _log,
      child: Text("浮動按鈕"),
      color: Colors.red,
    );

 

textColor
按鈕的文本顏色

 return RaisedButton(
      onPressed: _log,
      child: Text("浮動按鈕"),
      color: Colors.red,
      textColor: Colors.white,
    );

 

splashColor
點擊按鈕時水波紋的顏色

   return RaisedButton(
      onPressed: _log,
      child: Text("浮動按鈕"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
    
    );

 

highlightColor
高亮顏色，點擊（長按）按鈕后的顏色

    return RaisedButton(
      onPressed: _log,
      child: Text("浮動按鈕"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
      highlightColor: Colors.green,
    );

    

 

elevation
陰影范圍，一般不會設置太大

    return RaisedButton(
      onPressed: _log,
      child: Text("浮動按鈕"),
      color: Colors.red,
      textColor: Colors.white,
      splashColor: Colors.black,
      highlightColor: Colors.green,
      elevation: 30,
    );

 

padding
內邊距，其接收值的類型是EdgeInsetsGeometry類型的，EdgeInsetsGeometry是一個抽象類，我們來看看其實現類

 

我們一般都用EdgeInsets類中的方法來設置padding
常用方法如下

//單獨設置左上右下的間距，四個參數都要填寫
const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);

//單獨設置左上右下的間距，四個均為可選參數
  const EdgeInsets.only({
    this.left = 0.0,
    this.top = 0.0,
    this.right = 0.0,
    this.bottom = 0.0
  });
  
  //一次性設置上下左右的間距
  const EdgeInsets.all(double value)
      : left = value, top = value, right = value, bottom = value;
  

示例：

EdgeInsets.all（）

      padding: EdgeInsets.all(20)

 

EdgeInsets.fromLTRB（）

padding: EdgeInsets.fromLTRB(0,30,20,40)

 

EdgeInsets.only（）

 padding: EdgeInsets.only(top: 30)

 

 

shape
shape用來設置按鈕的形狀，其接收值是ShapeBorder類型，ShapeBorder是一個抽象類，我們來看看有哪些實現類

 

可以看到，實現類還是很多的，我們主要來看看常用的即可。

    BeveledRectangleBorder 帶斜角的長方形邊框
    CircleBorder 圓形邊框
    RoundedRectangleBorder 圓角矩形
    StadiumBorder 兩端是半圓的邊框

我們來簡單用一用，在用之前我們先來看一下
常用的兩個屬性

    side 用來設置邊線（顏色，寬度等）
    borderRadius 用來設置圓角

side接收一個BorderSide類型的值，比較簡單，這里就不介紹了，看一下構造方法

  const BorderSide({
    this.color = const Color(0xFF000000),
    this.width = 1.0,
    this.style = BorderStyle.solid,
  })

borderRadius 接收一個BorderRadius類型的值，常用方法如下

 

我們可以把borderRadius分為上下左右四個方向，下面的方法都是對這四個方向進行設置，

    all 配置所有方向
    cricular 環形配置，跟all效果差不多，直接接收double類型的值
    horizontal 只配置左右方向
    only 可選左上，右上，左下，右下配置
    vertical 只配置上下方向

具體配置大家自行嘗試

我們來簡單用一下

BeveledRectangleBorder
帶斜角的長方形邊框

shape: BeveledRectangleBorder(
         side: BorderSide(
        color: Colors.white,
      ),
      borderRadius: BorderRadius.all(Radius.circular(10))
      ),

    

 

CircleBorder
圓形邊框

     shape: CircleBorder(
        side: BorderSide(
          color: Colors.white,
        ),
      ),

 

 

RoundedRectangleBorder
圓角矩形

     shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),

 

StadiumBorder
兩端是半圓的邊框

 shape: StadiumBorder(),

 

 

FlatButton

FlatButton跟RaisedButton用法基本一致，下面我們就直接用一下

/*扁平按鈕*/
class FlatBtn extends StatelessWidget {
  _log() {
    print("點擊了扁平按鈕");
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: _log,
      child: Text("扁平按鈕"),
      color: Colors.blue,
      textColor: Colors.black,
      shape: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.white,
            width: 1,
          ),
          borderRadius: BorderRadius.circular(8)),
    );
  }
}

   

 

OutlineButton

注意，OutlineButton是一個有默認邊線且背景透明的按鈕，也就是說我們設置其邊線和顏色是無效的，其他屬性跟MaterialButton中屬性基本一致

下面我們直接來使用


/*帶邊線的按鈕*/
class outlineBtn extends StatelessWidget {
  _log() {
    print("點擊了邊線按鈕");
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return OutlineButton(
      onPressed: _log,
      child: Text("邊線按鈕"),
      textColor: Colors.red,
      splashColor: Colors.green,
      highlightColor: Colors.black,
      shape: BeveledRectangleBorder(
        side: BorderSide(
          color: Colors.red,
          width: 1,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

效果如下：

 

IconButton

IconButton是直接繼承自StatelessWidget的，默認沒有背景
我們來看一下他的構造方法

const IconButton({
    Key key,
    this.iconSize = 24.0,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    @required this.icon,
    this.color,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    @required this.onPressed,
    this.tooltip
  }) 

   
可以看到，icon是必填參數

icon接收一個Widget，但是一般我們都是傳入一個Icon Widget

final Widget icon;


其他屬性跟MaterialButton中的屬性用法基本一致

我們來用一下

/*圖標按鈕*/
class IconBtn extends StatelessWidget {
  _log() {
    print("點擊了圖標按鈕");
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.home),
      onPressed: _log,
      color: Colors.blueAccent,
      highlightColor: Colors.red,
    );
  }
}


效果如下

 

我們也可以傳一個Text或其他Widget，這個大家自行嘗試吧

Flutter中Button內容大概就是這些