一、介绍
在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 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 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 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 {
var buttonItems = ['item1', 'item2', 'item3', 'item4'];
String _itemValue;
List _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 |
| 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 {
final popupMenuItems = ['menu1', 'menu2', 'menu3', 'menu4'];
List _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,
);