大家好，我是 17。
本文已入选 [2023-03-04]｜CSDN每天值得看｜移动开发
在上篇文章 使用 Flutter Button 介绍了如何修改 button 的样式，本文来具体实践一下。
本文列举一些常用的 button 效果，以便在用到的时候方便使用。因为 ElevatedButton 最常用，所以大多以 ElevatedButton 举例。
ElevatedButton 一般是用做主 button 的。之所以叫 ElevatedButton 是因为按下的时候会有 elevation 变大的效果。
去掉水波效果
ElevatedButton(
child: Text('IAM17'),
style: ButtonStyle(splashFactory: NoSplash.splashFactory),
onPressed: () {},
)
- 1
- 2
- 3
- 4
- 5
监听状态变化
class _MyWidgetState extends State<MyWidget> {
late MaterialStatesController controller;
void initState() {
controller = MaterialStatesController();
controller.addListener(() {
print(controller.value);
});
super.initState();
}
void dispose() {
controller.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return ElevatedButton(
statesController: controller,
onPressed: () {},
child: Text('IAM17'),
);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
比如当按住按钮的时候，会输出 {MaterialState.pressed}，当松开按钮的时候会输出{}。被禁用的时候输出{MaterialState.disabled}。
shape 动画，size 和 文字样式
class _MyWidgetState extends State<MyWidget> {
var elevation = 10.0;
OutlinedBorder shape = CircleBorder();
void initState() {
super.initState();
}
void dispose() {
super.dispose();
}
Widget build(BuildContext context) {
return ElevatedButton(
clipBehavior: Clip.hardEdge,
style: ElevatedButton.styleFrom(
fixedSize: Size(100, 100),
textStyle:TextStyle(fontSize: 20),
shape: shape,
animationDuration: Duration(milliseconds: 600),
elevation: elevation),
onPressed: () {
setState(() {
elevation = elevation == 10 ? 20 : 10;
shape =
shape is CircleBorder ? RoundedRectangleBorder(borderRadius:BorderRadius.circular(10)) : CircleBorder();
});
},
child: Text('IAM17'),
);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
animationDuration 可以为 elevation 和 shape 提供动画支持。本例中，按钮从圆形和矩形之间不断变换，除了 shape 变化，elevation（投影）也会随着变化。
默认情况下 clip.none。如果按钮的文字过长会溢出。设置 clip.hardEdget 防止溢出。
fixedSize 设置按钮的大小，当然了，会受到最大最小值和父级的约束影响。
文字样式写在 style 的 textStyle ，不要去 child 的 Text 那里写。
foregroundColor、backgroundColor 和 overlayColor
ElevatedButton.styleFrom(
splashFactory: NoSplash.splashFactory,
foregroundColor: Colors.amber,
backgroundColor:Colors.green,
)
- 1
- 2
- 3
- 4
- 5
foregroundColor 是文字的颜色。别去 child 的 Text 设置文字颜色了。
backgroundColor 是背景色。
当按下按钮的时候显示的是 overlayColor，一般是一个半透明的，覆盖在 backgroundColor 上面，child 的下面。styleFrom 是不能设置 overlayColor 的。overlayColor 直接取 foregroundColor 并设置好的透明度，一般情况下我们不需要单独设置。单独设置 overlayColor 可以用 ButtonStyle。
ButtonStyle(
splashFactory: NoSplash.splashFactory,
foregroundColor: MaterialStateProperty.all<Color>(Colors.amber),
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
overlayColor: MaterialStateProperty.all<Color>(Colors.pink),
)
- 1
- 2
- 3
- 4
- 5
- 6
ButtonStyle 设置的 overlayColor 是不会自动加上透明效果，如果要透明，需要自己加透明效果。比如Color.fromRGBO(0, 0, 0, .2)。
disabled color
ElevatedButton(
style:ElevatedButton.styleFrom(
disabledBackgroundColor: Colors.grey,
disabledForegroundColor:Colors.black54
),
onPressed: null,
child: Text('IAM17'),
)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
按钮 disabled 后，按下去不会有反应了。只需要设置好 disabledBackgroundColor 和 disabledForegroundColor 即可，overlayColor 不需要设置了。
给按钮加边框
style:ElevatedButton.styleFrom(
side: BorderSide()
),
- 1
- 2
- 3
圆形
加边框很简单，side 属性就可以办到。和shape 配合可以做出各种形状的 border，比如圆形 border。
style:ElevatedButton.styleFrom(
shape: CircleBorder(),
fixedSize: Size(80,80),
side: BorderSide(color: Colors.red,width: 4,strokeAlign: StrokeAlign.inside)
- 1
- 2
- 3
- 4
strokeAlign 参数表示border 是画在shape 的外部，内部还是中间。如果 clipBehavior不为 Clip.none, 那么最好设置为 StrokeAlign.inside。
还有几种 shape 也一起介绍下吧。其实这些 shape 先有个印象即可，知道有这些 shape 可以用。
BeveledRectangle
style:ElevatedButton.styleFrom(
shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(20)),
fixedSize: Size(120,80),
side: BorderSide(color: Colors.red,width: 4))
- 1
- 2
- 3
- 4
ContinuousRectangle
style:ElevatedButton.styleFrom(
shape: ContinuousRectangleBorder( borderRadius: BorderRadius.circular(40)),
fixedSize: Size(120,80),
side: BorderSide(color: Colors.red,width: 4))
- 1
- 2
- 3
- 4
RoundedRectangle
style:ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
fixedSize: Size(80,80),
side: BorderSide(color: Colors.red,width: 4),
- 1
- 2
- 3
- 4
如果把 30 改变为 40 就变成圆形了。
stadium
style:ElevatedButton.styleFrom(
shape: StadiumBorder(),
fixedSize: Size(120,80),
side: BorderSide(color: Colors.red,width: 4),
- 1
- 2
- 3
- 4
stadium 的中文含意是 体育场，我们看形状也还真挺像的。
不知道你注意到没有 和 Text 的样式一样，side 也可以写在 各种 border 里面。但我们写的时候，最好都写在外面的 side 参数那里。
OutlineButton
OutlineButton 自带边框，没有背景色，没有 elevation。通常不作为主操作按钮。
带 icon 的 button
ElevatedButton.icon(
onPressed: () {}, icon: Icon(Icons.account_box), label: Text('IAM17'));
- 1
- 2
Flutter 这里还是很贴心的，为我们准备了 icon 命名构造函数。 OulineButton，TextButton也都有 icon 的构造函数。其实内部实现就是用了一个 Row。
如果只有一个 icon，那么可以用 IconButton 了。
渐变背景 button
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
),
),
TextButton(
style: TextButton.styleFrom(
foregroundColor: Colors.white,
padding: const EdgeInsets.all(16.0),
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
child: const Text('IAM17'),
),
],
),
)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
由于背景色只能用 Color ，所以要做出一个渐变背景色的 button 还是很麻烦的，需要叠加才行。最后还得用 ClipRRect 剪裁成圆角。