Flutter基礎Widget之按鈕（RaisedButton、FlatButton、OutlineButton，IconButton）

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內容大概就是這些