Flutter基礎(chǔ)Widget之按鈕（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中實現(xiàn)Button效果有很多方式

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

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

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

  const MaterialButton({
    Key key,
    @required this.onPressed,
    this.onLongPress,
    this.onHighlightChanged,
    this.mouseCursor,
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.focusColor,
    this.hoverColor,
    this.highlightColor,
    this.splashColor,
    this.colorBrightness,
    this.elevation,
    this.focusElevation,
    this.hoverElevation,
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.visualDensity,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.enableFeedback = true,
    this.child,
  })

下面我們來看看常用屬性

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

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

RaisedButton

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

 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

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

 return RaisedButton(
      onPressed: null,
    );

如下圖所示


image.png

child

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

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

color

按鈕顏色

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

textColor

按鈕的文本顏色

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

splashColor

點擊按鈕時水波紋顏色

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

highlightColor

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

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

elevation

陰影范圍，一般不會設(shè)置太大

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

padding

內(nèi)邊距,使用

padding: EdgeInsets.all(20)

或者

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

shape

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


image.png

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

  • BeveledRectangleBorder 帶斜角的長方形邊框
  • CircleBorder 圓形邊框
  • RoundedRectangleBorder 圓角矩形
  • StadiumBorder 兩端是半圓的邊框
    我們來簡單用一用，在用之前我們先來看一下
    常用的兩個屬性
  • side 用來設(shè)置邊線（顏色，寬度等）
  • borderRadius 用來設(shè)置圓角
    side接收一個BorderSide類型的值，比較簡單，這里就不介紹了，看一下構(gòu)造方法
  const BorderSide({
    this.color = const Color(0xFF000000),
    this.width = 1.0,
    this.style = BorderStyle.solid,
  })

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


image.png

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

  • all 配置所有方向
  • cricular 環(huán)形配置，跟all效果差不多，直接接收double類型的值
  • horizontal 只配置左右方向
  • only 可選左上，右上，左下，右下配置
  • vertical 只配置上下方向
    具體配置大家自行嘗試
    我們來簡單用一下

BeveledRectangleBorder

帶斜角的長方形邊框

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

CircleBorder

圓形邊框

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

RoundedRectangleBorder

圓角矩形

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

StadiumBorder

兩端是半圓的邊框

shape: StadiumBorder(),
image.png

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

OutlineButton

注意，OutlineButton是一個有默認邊線且背景透明的按鈕，也就是說我們設(shè)置其邊線和顏色是無效的，其他屬性跟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),
      ),
    );
  }
}

效果如下：


image.png

IconButton

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

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是必填參數(shù)

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

效果如下：


image.png

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

如果我們需要設(shè)置按鈕的最小寬度以及高度，button屬性中并沒有提供對應(yīng)的設(shè)置方法

ButtonTheme

使用如下：

ButtonTheme(
                      minWidth: 80,
                      height: 26,
                      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      child: RaisedButton(
                        padding: EdgeInsets.only(
                            left: 18, right: 18, top: 0, bottom: 0),
                        child: Text('#2021環(huán)法自行車賽',
                            style: TextStyle(
                                color: DColor.color_ff76b6b6b, fontSize: 14)),
                        color: Theme.of(context).buttonColor,
                        shape: StadiumBorder(),
                        onPressed: () {},
                      ),
                    ),
  • minWidth限制按鈕最小寬度
  • height 設(shè)置按鈕高度
  • materialTapTargetSize RaisedButton源碼中默認有按鈕最小高度，我們可以設(shè)置去掉。

Flutter中Button內(nèi)容大概就是這些

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容