一、介绍

在Flutter中有提供很多Button组件

RaisedButton:凸起的按钮，继承MaterialButton

FlatButton:扁平化的按钮，继承MaterialButton

OutlineButton:带边框的按钮，继承MaterialButton

FloatingActionButton:浮动圆形按钮，继承StatelessWidget

IconButton:图标按钮,，承StatelessWidget

DropdownButton:弹出下拉框，继承StatefulWidget

PopupMenuButton:菜单选择框按钮，继承StatefulWidget

TextButton:文本按钮，继承ButtonStyleButton

ElevatedButtont凸起的按钮:继承ButtonStyleButton

OutlinedButton带边框的按钮,继承ButtonStyleButton

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。以前的按钮调整为统一的外观比较麻烦，因此以前经常使用自定义的按钮，而新增的按钮解决了此类问题，可以非常方便的设置整体外观

二、RaisedButton

2.1、RaisedButton源码

const RaisedButton({
    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,//按钮文字样式(不设置文字颜色有效)
    double elevation,//阴影高度
    double focusElevation,
    double hoverElevation,
    double highlightElevation,//高亮时阴影高度
    double disabledElevation,//按钮不可点击时阴影高度
    EdgeInsetsGeometry padding,//内边距
    VisualDensity visualDensity,//Material Design中各类组件的视觉密度
    ShapeBorder shape,//设置按钮边框或形状
    Clip clipBehavior = Clip.none,//剪辑
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,//水波纹持续时间
    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学习"),
          ),
          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("点击变色"),
                  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("设置边框"),
                ),
                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可以单独使用
也可以作为Scaffold的floatingActionButton属性使用，Scaffold的floatingActionButtonLocation属性，可以配置FloatingActionButton的位置

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Button学习2"),
          ),
          //配合Scaffold使用
          //centerDocked 底部中间
          //endDocked 底部右侧
          //centerFloat 中间偏上
          //endFloat 底部偏上
          //startTop 左侧顶部
          //endTop 右侧顶部
          //......
          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: [
                //单独使用
                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学习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("请选择"),
              disabledHint: Text("按钮不可点击"),
              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--点击空白区域");
                },
                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学习"),
            actions: [],
          ),
          body: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              child: TextButton(
                child: Text("文本按钮"),
                onPressed: () {
                  print("onPressed");
                },
                onLongPress: () {
                  print("onLongPress");
                },
                style: ButtonStyle(
                  //设置颜色无效
                  textStyle: MaterialStateProperty.all(
                      TextStyle(fontSize: 18, color: Colors.red)),

                  foregroundColor: MaterialStateProperty.resolveWith(
                    (states) {
                      if (states.contains(MaterialState.pressed)) {
                        ////按下时的颜色
                        return Colors.red;
                      }
                      //默认状态使用灰色
                      return Colors.black;
                    },
                  ),

                  backgroundColor: MaterialStateProperty.resolveWith((states) {
                    //设置按下时的背景颜色
                    if (states.contains(MaterialState.pressed)) {
                      return Colors.yellow;
                    }
                    //默认不使用背景颜色
                    return null;
                  }),
                //设置水波纹颜色
                  overlayColor: MaterialStateProperty.all(Colors.purpleAccent),
                  //设置按钮大小
                  minimumSize: MaterialStateProperty.all(Size(150, 80)),
                  //设置边框
                  side: MaterialStateProperty.all(
                      BorderSide(color: Colors.red, width: 1)),
                  //设置按钮形状
                  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的属性介绍