flutterFlutterdart

Flutter--Button按钮学习

2020-12-22  本文已影响0人  小迷糊_dcee

一、介绍

在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。以前的按钮调整为统一的外观比较麻烦，因此以前经常使用自定义的按钮，而新增的按钮解决了此类问题，可以非常方便的设置整体外观

1.22版本前的按钮 主题 1.22版本后的按钮 主题
FlatButton ButtonTheme TextButton TextButtonTheme
OutlineButton ButtonTheme OutlinedButton OutlinedButtonTheme
RaisedButton ButtonTheme ElevatedButton ElevatedButtonTheme

二、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属性介绍
属性 说明
onPressed 点击监听
onLongPress 长按点击监听
onHighlightChanged 高亮变化监听
textTheme 文字主题,取决于MaterialApp的theme属性
ButtonTextTheme.normal: 文本颜色取决于ThemeData.brightness
ButtonTextTheme.accent: 文本颜色取决于ThemeData.accentColor
ButtonTextTheme.primary:文本颜色基于ThemeData.primaryColor
textColor 文本颜色
disabledTextColor 按钮不可点击时文本颜色
color 按钮颜色
disabledColor 按钮不可点击时按钮颜色
highlightColor 高亮颜色，即按钮点击时按钮的颜色
splashColor 水波纹颜色
colorBrightness 按钮文字样式(不设置color时有效)
Brightness.light黑色
Brightness.dark白色
elevation 阴影高度
highlightElevation 高亮时阴影高度，即点击按钮时阴影高度
disabledElevation 按钮不可点击时，阴影的高度
padding 内间距
visualDensity Material Design中各类组件的视觉密度
shape 设置按钮边框或形状(具体使用见demo)
Border只设置边框
BeveledRectangleBorder尖端斜角
RaisedButton圆形按钮
RoundedRectangleBorder圆角按钮
StadiumBorder半圆角按钮
clipBehavior 剪切内容
Clip.hardEdge剪辑，但不应用抗锯齿
Clip.antiAlias剪辑具有抗锯齿功能
Clip.antiAliasWithSaveLayer在剪辑后立即剪辑具有抗锯齿和saveLayer
Clip.none不剪辑
child 子组件
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属性介绍
属性 说明
foregroundColor 前置色，一般是文字或者图标的颜色
backgroundColor 背景色
mini 是否mini模式
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属性介绍
属性 说明
iconSize 图标大小
splashRadius 点击图标的溅射范围
splashColor 溅射的颜色
icon 图标
tooltip 提示信息，按钮长按可显示,显示1500ms
alignment 对齐方式

其余属性参考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的属性介绍
属性 说明
items 下拉菜单项
value 选中的值
hint value为空时的提示语
disabledHint 下拉按钮不能用时的提示语
onChanged 下拉按钮改变值的事件监听
onTap 点击按钮的事件监听
elevation 阴影高度
style 文本样式
underline 下划线
icon 按钮的图标，默认Icons.arrow_drop_down
iconDisabledColor 下拉按钮不可点击时，图标的颜色
iconEnabledColor 下拉按钮可点击时，图标的颜色
iconSize 图标的大小
isDense 默认为false该按钮的高度与其菜单项的高度相同，如果为true按钮高度是item高度的一半
isExpanded 默认false按钮的内部宽度是其内容的最小尺寸
true，则内部宽度将被展开来填充周围的容器。
itemHeight
dropdownColor 下拉菜单的背景颜色
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的属性介绍
属性 说明
itemBuilder 弹出菜单项的生成器，该方法返回List<PopupMenuItem>
initialValue 设置弹出菜单默认选中项的值
onSelected 弹出菜单被选择事件监听
onCanceled 没用任何菜单被选择时触发，即点击空白处触发
tooltip 提示信息，按钮长按可显示
elevation 阴影高度
padding 内间距
child 子组件
icon 图标
offset 设置下拉菜单偏移量
enabled 是否可使用
shape 参考RaisedButton的shape属性
color 参考RaisedButton的color属性
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属性介绍
属性 说明
onPressed 点击监听
onLongPress 长按监听
style ButtonStyle样式，详情见下文
clipBehavior 参考RaisedButton的clipBehavior属性
child 子组件
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,
  });
属性 说明
textStyle 文本样式,设置文字的大小和粗细
backgroundColor 背景色
foregroundColor 前景色，即文本的颜色和图标的颜色
overlayColor 水波纹颜色
shadowColor 阴影颜色
elevation 阴影高度
padding 内间距
minimumSize 设置按钮的大小
side 边框设置
shape 外边框样式会覆盖side,参考RaisedButton的shape属性，使用方法有点不同，具体使用见代码
visualDensity 参考RaisedButton的visualDensity属性
tapTargetSize 配置按钮被按下区域的最小尺寸
animationDuration 动画变化的持续时间
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的属性介绍
上一篇下一篇

猜你喜欢

热点阅读