1、Button Widget
Flutter中主要有5种，ElevatedButton、TextButton、OutlinedButton、IconButton、FloatingActionButton
class _MSHomeContentState extends State {
@override
Widget build(BuildContext context) {
return Column(
children: [
// 1. ElevatedButton (RaisedButton 已取消)
ElevatedButton(
onPressed: () => print("ElevatedButton 点击"), // 点击事件
onLongPress: () => print("ElevatedButton LongPress"), // 长按事件
child: Text("ElevatedButton"),
style: ButtonStyle(),
),
// 2. TextButton (FlatButton 已取消)
TextButton(
onPressed: () => print("TextButton 点击"),
onLongPress: () => print("TextButton longPress"),
child: Text("TextButton"),
),
// 3. OutlinedButton (OutlineButton 已取消)
OutlinedButton(
onPressed: () => print("OutlinedButton 点击"),
onLongPress: () => print("OutlinedButton longPress"),
child: Text("OutlinedButton"),
),
// 4. IconButton
IconButton(
onPressed: () => print("IconButton"),
icon: Icon(Icons.favorite),
),
// 5. FloatingActionButton
FloatingActionButton(onPressed: () => print("FloatingActionButton")),
],
);
}
}
基本样式如下图
截屏2022-04-12 上午11.43.50.png
1.1 按钮事件
1.1.1 点击事件 onPressed
ElevatedButton(
child: Text("爱你"),
onPressed: () {
print('我被点击了');
},
);
1.1.2 长按事件 onLongPress
ElevatedButton(
child: Text("爱你"),
onLongPress : () {
print('我被长按了');
},
);
1.2 ButtonStyle 属性
textStyle //字体
backgroundColor //背景色
foregroundColor //字体颜色
overlayColor // 高亮色，按钮处于focused, hovered, or pressed时的颜色
shadowColor // 阴影颜色
elevation // 阴影值
padding // padding
minimumSize //最小尺寸
side //边框
shape //形状
mouseCursor //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时
visualDensity // 按钮布局的紧凑程度
tapTargetSize // 响应触摸的区域
animationDuration //[shape]和[elevation]的动画更改的持续时间。
enableFeedback // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
textStyle 字体
ElevatedButton(
child: Text("爱你"),
style: ButtonStyle(
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16)), //字体
),
onPressed: () {
print('我被点击了');
},
)
backgroundColor 背景颜色
ElevatedButton(
child: Text("爱你"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Color(0xffEDFCF5)), //背景颜色
),
onPressed: () {
print('我被点击了');
},
)
foregroundColor 字体颜色
ElevatedButton(
child: Text("爱你"),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Color(0xff31C27C)), //字体颜色
),
onPressed: () {
print('我被点击了');
},
)
overlayColor 高亮色，按钮处于focused, hovered, or pressed时的颜色
ElevatedButton(
child: Text("爱你"),
style: ButtonStyle(
overlayColor: MaterialStateProperty.all(Color(0xff31C27C)), //字体颜色
),
onPressed: () {
print('我被点击了');
},
)
side 边框
ElevatedButton(
child: Text("爱你"),
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffffffff))),//边框
),
onPressed: () {
print('我被点击了');
},
)
shadowColor 阴影颜色
ElevatedButton(
child: Text("爱你"),
style: ButtonStyle(
shadowColor: MaterialStateProperty.all(Colors.red),
),
onPressed: () {
print('我被点击了');
},
)
elevation 阴影值
ElevatedButton(
child: Text("爱你"),
style: ButtonStyle(
elevation: MaterialStateProperty.all(10), //阴影值
),
onPressed: () {
print('我被点击了');
},
)
shape 形状-可设置圆角弧度
（1）棱形，如果不设置边框，可以实现圆角弧度那种效果，设置边框就是棱形
2021041314120792.png
ElevatedButton(
child: Text("审核完成"),
style: ButtonStyle(
side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffCAD0DB))),//边框
shape: MaterialStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(8))),//圆角弧度
),
onPressed: () {
print('我被点击了');
},
)
20210413141635481.png
ElevatedButton(
child: Text("学习报告"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Color(0xffFFF8E5)), //背景颜色
foregroundColor: MaterialStateProperty.all(Color(0xffB85F23)), //字体颜色
overlayColor: MaterialStateProperty.all(Color(0xffFFF8E5)), // 高亮色
shadowColor: MaterialStateProperty.all( Color(0xffffffff)), //阴影颜色
elevation: MaterialStateProperty.all(0), //阴影值
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 12)), //字体
side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffffffff))),//边框
shape: MaterialStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(8))),//圆角弧度
),
onPressed: () {},
);
（2）圆形
20210413142451300.png
ElevatedButton(
child: Text("审"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Color(0xffffffff)), //背景颜色
foregroundColor: MaterialStateProperty.all(Color(0xff5E6573)), //字体颜色
overlayColor: MaterialStateProperty.all(Color(0xffffffff)), // 高亮色
shadowColor: MaterialStateProperty.all( Color(0xffffffff)), //阴影颜色
elevation: MaterialStateProperty.all(0), //阴影值
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 12)), //字体
side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffCAD0DB))),//边框
shape: MaterialStateProperty.all(
CircleBorder(
side: BorderSide(
//设置 界面效果
color: Colors.green,
width: 280.0,
style: BorderStyle.none,
)
)
),//圆角弧度
),
onPressed: () {},
)
（3）圆角弧度
20210413142055365.png
ElevatedButton(
child: Text("审核完成"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Color(0xffffffff)), //背景颜色
foregroundColor: MaterialStateProperty.all(Color(0xff5E6573)), //字体颜色
overlayColor: MaterialStateProperty.all(Color(0xffffffff)), // 高亮色
shadowColor: MaterialStateProperty.all( Color(0xffffffff)), //阴影颜色
elevation: MaterialStateProperty.all(0), //阴影值
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 12)), //字体
side: MaterialStateProperty.all(BorderSide(width: 1,color: Color(0xffCAD0DB))),//边框
shape: MaterialStateProperty.all(
StadiumBorder(
side: BorderSide(
//设置 界面效果
style: BorderStyle.solid,
color: Color(0xffFF7F24),
)
)
),//圆角弧度
),
1.3 按钮完整实例
class _MSHomeContentState extends State {
@override
Widget build(BuildContext context) {
return Column(
children: [
ElevatedButton(
onPressed: () => print("ElevatedButton 点击"), // 点击事件
onLongPress: () => print("ElevatedButton longPress"), // 长按事件
child: Text("ElevatedButton"),
style: ButtonStyle(
// 如果所有的状态一样， 使用 MaterialStateProperty.all
// foregroundColor: MaterialStateProperty.all(Colors.red),
//如果状态不一样使用MaterialStateProperty.resolveWith
// 字体颜色
foregroundColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.focused) &&
!states.contains(MaterialState.pressed)) {
// 获取焦点时的TextStyle
return Colors.yellow;
} else if (states.contains(MaterialState.pressed)) {
// 获取按下时的TextStyle
return Colors.blue;
} else {
return Colors.white;
}
}),
// backgroundColor 背景颜色
backgroundColor: MaterialStateProperty.all(Color(0xFF1b7642)),
// TextStyle 字体
textStyle: MaterialStateProperty.all(
TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
// overlayColor 高亮色，按钮处于focused, hovered, or pressed时的颜色
overlayColor: MaterialStateProperty.all(Color(0x2431C27C)),
// side 边框
side: MaterialStateProperty.all(
BorderSide(color: Colors.purple, width: 2)),
// shadowColor 阴影颜色
shadowColor: MaterialStateProperty.all(Colors.amber),
// elevation 阴影值
elevation: MaterialStateProperty.all(10.0),
// shape 形状-可设置圆角弧度
// 圆角弧度
// shape: MaterialStateProperty.all(RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(20))),
// 圆角弧度
// shape: MaterialStateProperty.all(StadiumBorder()),
// 棱形，如果不设置边框，可以实现圆角弧度那种效果，设置边框就是棱形
// shape: MaterialStateProperty.all(
// BeveledRectangleBorder(borderRadius: BorderRadius.circular(8))),
// 圆形
// shape: MaterialStateProperty.all(
// CircleBorder(side: BorderSide(width: 300))),
),
),
],
);
}
}
相关知识点
1.为什么默认button上下有一定的间距
class _MSHomeContentState extends State {
// 1.button 默认上下有一定的间距
@override
Widget build(BuildContext context) {
return Column(
children: [
TextButton(
onPressed: () {},
child: Text("TextButton"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red),
),
),
TextButton(
onPressed: () {},
child: Text("TextButton"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red)),
),
],
);
}
}
image.png
原因：
ButtonStyle 的tapTargetSize 默认值为MaterialTapTargetSize.padded,默认扩展到48px * 48px。将tapTargetSize设置为MaterialTapTargetSize.shrinkWrap，即可去除上下间距
可以通过minimumSize和padding 去除Button内文字的内间距
minimumSize: MaterialStateProperty.all(Size(30, 20)),
padding: MaterialStateProperty.all(EdgeInsets.zero),