一托猩、介紹

在Flutter中有提供很多Button組件

RaisedButton:凸起的按鈕，繼承MaterialButton

FlatButton:扁平化的按鈕，繼承MaterialButton

OutlineButton:帶邊框的按鈕冯丙，繼承MaterialButton

FloatingActionButton:浮動(dòng)圓形按鈕酥筝，繼承StatelessWidget

IconButton:圖標(biāo)按鈕,，承StatelessWidget

DropdownButton:彈出下拉框圃酵，繼承StatefulWidget

PopupMenuButton:菜單選擇框按鈕柳畔，繼承StatefulWidget

TextButton:文本按鈕，繼承ButtonStyleButton

ElevatedButtont凸起的按鈕:繼承ButtonStyleButton

OutlinedButton帶邊框的按鈕,繼承ButtonStyleButton

Flutter 1.22版本新增了3個(gè)按鈕郭赐，TextButton薪韩、OutlinedButton、ElevatedButton，雖然以前的Button沒有被廢棄俘陷，但還是建議使用新的Button罗捎。以前的按鈕調(diào)整為統(tǒng)一的外觀比較麻煩，因此以前經(jīng)常使用自定義的按鈕岭洲，而新增的按鈕解決了此類問題宛逗，可以非常方便的設(shè)置整體外觀

二、RaisedButton

2.1盾剩、RaisedButton源碼

const RaisedButton({
    Key key,
    @required VoidCallback onPressed,//點(diǎn)擊事件監(jiān)聽
    VoidCallback onLongPress,//長(zhǎng)按監(jiān)聽
    ValueChanged<bool> onHighlightChanged,//高亮變化監(jiān)聽
    MouseCursor mouseCursor,
    ButtonTextTheme textTheme,//文本主題
    Color textColor,//文本顏色
    Color disabledTextColor,//按鈕不可點(diǎn)擊時(shí)文本顏色
    Color color,//按鈕顏色
    Color disabledColor,//按鈕不可點(diǎn)擊時(shí)按鈕顏色
    Color focusColor,
    Color hoverColor,
    Color highlightColor,//高亮顏色
    Color splashColor,//水波紋顏色
    Brightness colorBrightness,//按鈕文字樣式(不設(shè)置文字顏色有效)
    double elevation,//陰影高度
    double focusElevation,
    double hoverElevation,
    double highlightElevation,//高亮?xí)r陰影高度
    double disabledElevation,//按鈕不可點(diǎn)擊時(shí)陰影高度
    EdgeInsetsGeometry padding,//內(nèi)邊距
    VisualDensity visualDensity,//Material Design中各類組件的視覺密度
    ShapeBorder shape,//設(shè)置按鈕邊框或形狀
    Clip clipBehavior = Clip.none,//剪輯
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,//水波紋持續(xù)時(shí)間
    Widget child,//子組件
  }) : assert(autofocus != null),
       assert(elevation == null || elevation >= 0.0),
       assert(focusElevation == null || focusElevation >= 0.0),
       assert(hoverElevation == null || hoverElevation >= 0.0),
       assert(highlightElevation == null || highlightElevation >= 0.0),
       assert(disabledElevation == null || disabledElevation >= 0.0),
       assert(clipBehavior != null),
       super(
         key: key,
         onPressed: onPressed,
         onLongPress: onLongPress,
         onHighlightChanged: onHighlightChanged,
         mouseCursor: mouseCursor,
         textTheme: textTheme,
         textColor: textColor,
         disabledTextColor: disabledTextColor,
         color: color,
         disabledColor: disabledColor,
         focusColor: focusColor,
         hoverColor: hoverColor,
         highlightColor: highlightColor,
         splashColor: splashColor,
         colorBrightness: colorBrightness,
         elevation: elevation,
         focusElevation: focusElevation,
         hoverElevation: hoverElevation,
         highlightElevation: highlightElevation,
         disabledElevation: disabledElevation,
         padding: padding,
         visualDensity: visualDensity,
         shape: shape,
         clipBehavior: clipBehavior,
         focusNode: focusNode,
         autofocus: autofocus,
         materialTapTargetSize: materialTapTargetSize,
         animationDuration: animationDuration,
         child: child,
       );

2.2雷激、RaisedButton屬性介紹

2.3驻粟、RaisedButton的demo

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Button學(xué)習(xí)"),
          ),
          body: Container(
            padding: EdgeInsets.only(left: 10, top: 0, right: 0, bottom: 0),
            child: Wrap(
              spacing: 15,
              runSpacing: 5,
              children: [
                RaisedButton(
                  onPressed: () {
                    print("普通按鈕");
                  },
                  colorBrightness: Brightness.dark,
                  child: Text("普通按鈕"),
                ),
                RaisedButton(
                  onPressed: () {
                    print("帶顏色按鈕");
                  },
                  child: Text("帶顏色按鈕"),
                  textColor: Colors.yellow,
                  color: Colors.red,
                ),
                RaisedButton(
                  onPressed: null,
                  child: Text("禁用按鈕"),
                  disabledTextColor: Colors.white,
                  disabledColor: Colors.blue,
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("陰影效果"),
                  elevation: 20,
                  highlightElevation: 10,
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("點(diǎn)擊變色"),
                  highlightColor: Colors.red,
                ),
                RaisedButton(
                  onPressed: () {},
                  splashColor: Colors.red,
                  child: Text("水波紋效果"),
                ),
                RaisedButton(
                  onPressed: () {},
                  shape: Border.all(
                      color: Colors.red, width: 1, style: BorderStyle.solid),
                  child: Text("設(shè)置邊框"),
                ),
                RaisedButton(
                  onPressed: () {},
                  shape: BeveledRectangleBorder(
                      side: BorderSide(
                          color: Colors.red,
                          width: 1,
                          style: BorderStyle.solid),
                      borderRadius: BorderRadius.all(Radius.circular(5))),
                  child: Text("尖端斜角"),
                ),
                Container(
                  height: 80,
                  width: 80,
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("圓形按鈕"),
                    shape: CircleBorder(
                        side: BorderSide(
                            color: Colors.red,
                            width: 1,
                            style: BorderStyle.solid)),
                  ),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("圓角按鈕"),
                  shape: RoundedRectangleBorder(
                      side: BorderSide(
                          color: Colors.red,
                          width: 1,
                          style: BorderStyle.solid),
                      borderRadius: BorderRadius.circular(10)),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("半圓角按鈕"),
                  shape: StadiumBorder(
                    side: BorderSide(
                        color: Colors.red, width: 1, style: BorderStyle.solid),
                  ),
                ),
              ],
            ),
          )),
    );

1111.png

2020.12.22.00.25.29.gif

2020.12.22.00.26.42.gif

三根悼、FlatButton

3.1FlatButton的源碼

const FlatButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ValueChanged<bool> onHighlightChanged,
    MouseCursor mouseCursor,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget child,
    double height,
    double minWidth,
  }) : assert(clipBehavior != null),
       assert(autofocus != null),
       super(
         key: key,
         height: height,
         minWidth: minWidth,
         onPressed: onPressed,
         onLongPress: onLongPress,
         onHighlightChanged: onHighlightChanged,
         mouseCursor: mouseCursor,
         textTheme: textTheme,
         textColor: textColor,
         disabledTextColor: disabledTextColor,
         color: color,
         disabledColor: disabledColor,
         focusColor: focusColor,
         hoverColor: hoverColor,
         highlightColor: highlightColor,
         splashColor: splashColor,
         colorBrightness: colorBrightness,
         padding: padding,
         visualDensity: visualDensity,
         shape: shape,
         clipBehavior: clipBehavior,
         focusNode: focusNode,
         autofocus: autofocus,
         materialTapTargetSize: materialTapTargetSize,
         child: child,
      );

3.2、FlatButton的屬性介紹蜀撑，參考RaisedButton屬性介紹

四挤巡、OutlineButton

4.1、OutlineButton源碼

const OutlineButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    MouseCursor mouseCursor,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    double highlightElevation,
    this.borderSide,
    this.disabledBorderColor,
    this.highlightedBorderColor,
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    Widget child,
  }) : assert(highlightElevation == null || highlightElevation >= 0.0),
       assert(clipBehavior != null),
       assert(autofocus != null),
       super(
         key: key,
         onPressed: onPressed,
         onLongPress: onLongPress,
         mouseCursor: mouseCursor,
         textTheme: textTheme,
         textColor: textColor,
         disabledTextColor: disabledTextColor,
         color: color,
         focusColor: focusColor,
         hoverColor: hoverColor,
         highlightColor: highlightColor,
         splashColor: splashColor,
         highlightElevation: highlightElevation,
         padding: padding,
         visualDensity: visualDensity,
         shape: shape,
         clipBehavior: clipBehavior,
         focusNode: focusNode,
         materialTapTargetSize: materialTapTargetSize,
         autofocus: autofocus,
         child: child,
       );

4.2酷麦、OutlineButton的屬性介紹矿卑，參考RaisedButton屬性介紹

五、FloatingActionButton

5.1沃饶、FloatingActionButton源碼

const FloatingActionButton({
    Key key,
    this.child,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.focusColor,
    this.hoverColor,
    this.splashColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation,
    this.focusElevation,
    this.hoverElevation,
    this.highlightElevation,
    this.disabledElevation,
    @required this.onPressed,
    this.mouseCursor,
    this.mini = false,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.materialTapTargetSize,
    this.isExtended = false,
  }) : assert(elevation == null || elevation >= 0.0),
       assert(focusElevation == null || focusElevation >= 0.0),
       assert(hoverElevation == null || hoverElevation >= 0.0),
       assert(highlightElevation == null || highlightElevation >= 0.0),
       assert(disabledElevation == null || disabledElevation >= 0.0),
       assert(mini != null),
       assert(clipBehavior != null),
       assert(isExtended != null),
       assert(autofocus != null),
       _sizeConstraints = mini ? _kMiniSizeConstraints : _kSizeConstraints,
       super(key: key);

5.2母廷、FloatingActionButton屬性介紹

5.3糊肤、FloatingActionButton的demo

FloatingActionButton可以單獨(dú)使用
也可以作為Scaffold的floatingActionButton屬性使用琴昆，Scaffold的floatingActionButtonLocation屬性，可以配置FloatingActionButton的位置

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Button學(xué)習(xí)2"),
          ),
          //配合Scaffold使用
          //centerDocked 底部中間
          //endDocked 底部右側(cè)
          //centerFloat 中間偏上
          //endFloat 底部偏上
          //startTop 左側(cè)頂部
          //endTop 右側(cè)頂部
          //......
          floatingActionButtonLocation:FloatingActionButtonLocation.endTop ,
          floatingActionButton:FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.home),
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
            mini: true,
          ) ,
          body: Container(
            padding: EdgeInsets.only(left: 10, top: 0, right: 0, bottom: 0),
            child: Wrap(
              spacing: 15,
              runSpacing: 5,
              children: [
                //單獨(dú)使用
                FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.people),
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.yellow,
                )
              ],
            ),
          )),
    );

22222.png

六馆揉、IconButton

6.1业舍、IconButton源碼

const IconButton({
    Key key,
    this.iconSize = 24.0,
    this.visualDensity,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    this.splashRadius,
    @required this.icon,
    this.color,
    this.focusColor,
    this.hoverColor,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    @required this.onPressed,
    this.mouseCursor = SystemMouseCursors.click,
    this.focusNode,
    this.autofocus = false,
    this.tooltip,
    this.enableFeedback = true,
    this.constraints,
  }) : assert(iconSize != null),
       assert(padding != null),
       assert(alignment != null),
       assert(splashRadius == null || splashRadius > 0),
       assert(autofocus != null),
       assert(icon != null),
       super(key: key);

6.2、IconButton屬性介紹

其余屬性參考RaisedButton屬性勤讽。

6.3、IconButton的demo

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Button學(xué)習(xí)4"),
          ),
          body: Container(
            padding: EdgeInsets.only(left: 10, top: 0, right: 0, bottom: 0),
            alignment: Alignment.center,
            child: IconButton(
              iconSize: 50,
              color: Colors.blue,
              splashRadius: 50,
              splashColor: Colors.red,
              icon: Icon(Icons.home),
              onPressed: () {},
            ),
          )),
    );

1122.gif

七拗踢、DropdownButton

7.1脚牍、DropdownButton源碼

DropdownButton({
    Key key,
    @required this.items,
    this.selectedItemBuilder,
    this.value,
    this.hint,
    this.disabledHint,
    @required this.onChanged,
    this.onTap,
    this.elevation = 8,
    this.style,
    this.underline,
    this.icon,
    this.iconDisabledColor,
    this.iconEnabledColor,
    this.iconSize = 24.0,
    this.isDense = false,
    this.isExpanded = false,
    this.itemHeight = kMinInteractiveDimension,
    this.focusColor,
    this.focusNode,
    this.autofocus = false,
    this.dropdownColor,
    // When adding new arguments, consider adding similar arguments to
    // DropdownButtonFormField.
  }) : assert(items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1,
                "There should be exactly one item with [DropdownButton]'s value: "
                '$value. \n'
                'Either zero or 2 or more [DropdownMenuItem]s were detected '
                'with the same value',
              ),
       assert(elevation != null),
       assert(iconSize != null),
       assert(isDense != null),
       assert(isExpanded != null),
       assert(autofocus != null),
       assert(itemHeight == null || itemHeight >=  kMinInteractiveDimension),
       super(key: key);

7.2、DropdownButton的屬性介紹

7.3、DropdownButton的demo

class ButtonFul extends StatefulWidget {
  ButtonFul({Key key}) : super(key: key);

  _ButtonFulState createState() => _ButtonFulState();
}

class _ButtonFulState extends State<ButtonFul> {
  var buttonItems = ['item1', 'item2', 'item3', 'item4'];
  String _itemValue;

  List<DropdownMenuItem> _getDropdownItem() {
    return buttonItems.map((e) {
      return DropdownMenuItem(
        child: Text(e),
        value: e,
      );
    }).toList();
  }

  @override
  void initState() {
    super.initState();
    _itemValue = buttonItems[0];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("StatefulWidget模板"),
          ),
          body: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(10),
            child: DropdownButton(
              onChanged: (value) {
                setState(() {
                  print("ysl--onChanged");
                  _itemValue = value;
                });
              },
              onTap: (){
                print("ysl--onTap");
              },
              items: _getDropdownItem(),
              value: _itemValue,
              hint: Text("請(qǐng)選擇"),
              disabledHint: Text("按鈕不可點(diǎn)擊"),
              elevation: 10,
              underline: Container(color: Colors.red,height: 1,),
              iconSize: 30,
              dropdownColor: Colors.blue,
            ),
          )),
    );
  }
}

2020.12.22.15.15.24.gif

八叉庐、PopupMenuButton

8.1舒帮、PopupMenuButton的源碼

const PopupMenuButton({
    Key key,
    @required this.itemBuilder,
    this.initialValue,
    this.onSelected,
    this.onCanceled,
    this.tooltip,
    this.elevation,
    this.padding = const EdgeInsets.all(8.0),
    this.child,
    this.icon,
    this.offset = Offset.zero,
    this.enabled = true,
    this.shape,
    this.color,
    this.captureInheritedThemes = true,
  }) : assert(itemBuilder != null),
       assert(offset != null),
       assert(enabled != null),
       assert(captureInheritedThemes != null),
       assert(!(child != null && icon != null),
           'You can only pass [child] or [icon], not both.'),
       super(key: key);

8.2、PopupMenuButton的屬性介紹

8.3枉阵、PopupMenuButton的demo

class ButtonFul extends StatefulWidget {
  ButtonFul({Key key}) : super(key: key);

  _ButtonFulState createState() => _ButtonFulState();
}

class _ButtonFulState extends State<ButtonFul> {
  final popupMenuItems = ['menu1', 'menu2', 'menu3', 'menu4'];

  List<PopupMenuItem> _getPopupMenu() {
    return popupMenuItems.map((e) {
      return PopupMenuItem(
        child: Text(e),
        value: e,
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("StatefulWidget模板"),
            actions: [],
          ),
          body: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              child: PopupMenuButton(
                itemBuilder: (context) {
                  return _getPopupMenu();
                },
                icon: Icon(Icons.add_circle),
                initialValue: popupMenuItems[0],
                elevation: 20,
                onSelected: (item) {
                  print("ysl--選擇條目");

                },
                tooltip: "tooltip",
                onCanceled: () {
                  print("ysl--點(diǎn)擊空白區(qū)域");
                },
                shape: RoundedRectangleBorder(
                    side: BorderSide(
                        color: Colors.red, width: 1, style: BorderStyle.solid),
                    borderRadius: BorderRadius.circular(10)),
                offset: Offset(10, 20),
                color: Colors.yellow,
              ))),
    );
  }
}

2020.12.22.16.08.55.gif

九译红、TextButton文本按鈕

9.1、TextButton源碼

const TextButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

9.2兴溜、TextButton屬性介紹

9.3、ButtonStyle的源碼及屬性介紹

const ButtonStyle({
    this.textStyle,
    this.backgroundColor,
    this.foregroundColor,
    this.overlayColor,
    this.shadowColor,
    this.elevation,
    this.padding,
    this.minimumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
  });

9.4膘怕、TextButton的demo

home: Scaffold(
          appBar: AppBar(
            title: Text("TextButton學(xué)習(xí)"),
            actions: [],
          ),
          body: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              child: TextButton(
                child: Text("文本按鈕"),
                onPressed: () {
                  print("onPressed");
                },
                onLongPress: () {
                  print("onLongPress");
                },
                style: ButtonStyle(
                  //設(shè)置顏色無效
                  textStyle: MaterialStateProperty.all(
                      TextStyle(fontSize: 18, color: Colors.red)),

                  foregroundColor: MaterialStateProperty.resolveWith(
                    (states) {
                      if (states.contains(MaterialState.pressed)) {
                        ////按下時(shí)的顏色
                        return Colors.red;
                      }
                      //默認(rèn)狀態(tài)使用灰色
                      return Colors.black;
                    },
                  ),

                  backgroundColor: MaterialStateProperty.resolveWith((states) {
                    //設(shè)置按下時(shí)的背景顏色
                    if (states.contains(MaterialState.pressed)) {
                      return Colors.yellow;
                    }
                    //默認(rèn)不使用背景顏色
                    return null;
                  }),
                //設(shè)置水波紋顏色
                  overlayColor: MaterialStateProperty.all(Colors.purpleAccent),
                  //設(shè)置按鈕大小
                  minimumSize: MaterialStateProperty.all(Size(150, 80)),
                  //設(shè)置邊框
                  side: MaterialStateProperty.all(
                      BorderSide(color: Colors.red, width: 1)),
                  //設(shè)置按鈕形狀
                  shape: MaterialStateProperty.all(StadiumBorder(
                    side: BorderSide(
                        color: Colors.red, width: 1, style: BorderStyle.solid),
                  )),
                ),
              ))),

2020.12.22.16.57.09.gif

十已卷、ElevatedButton

10.1、ElevatedButton的源碼

const ElevatedButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

10.1淳蔼、ElevatedButton的屬性介紹，參考TextButton的屬性介紹

十一裁眯、OutlinedButton

11.1鹉梨、OutlinedButton的源碼

const OutlinedButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

10.1、OutlinedButton的屬性介紹穿稳，參考TextButton的屬性介紹