Flutter基础Widgets之Button

在Flutter中有两种风格的Button,Android风格的RawMaterialButton和iOS风格的CupertinoButton

Button

思维导图

MaterialButton

继承关系:

StateFullWidget > MaterialButton > RaisedButton、FlatButton、OutlineButton、IconButton。

MaterialButton是通过对RawMaterialButton包装定制而成的,并且带有Theme。相比CupertinoButton多了一些水波纹的效果(通过组合InkWell实现)和阴影效果。

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
34
35
36
37
38
const MaterialButton({
Key key,
@required this.onPressed,
this.onHighlightChanged,
//按钮主题(定义了基色,按钮最小尺寸,内部填充和形状的默认值)
this.textTheme,
//文本颜色
this.textColor,
//未设置点击回调时的 文本颜色
this.disabledTextColor,
//填充颜色
this.color,
//未设置点击回调时的 填充颜色
this.disabledColor,
//按下时的填充颜色
this.highlightColor,
//按下时的水波纹颜色,有默认值
this.splashColor,
//主题亮度
this.colorBrightness,
//阴影大小,类似在z轴添加了一层阴影
this.elevation,
//设置了点击回调时按钮的阴影的大小
this.highlightElevation,
//未设置点击回调时按钮的阴影的大小
this.disabledElevation,
this.padding,
//形状
this.shape,
//裁剪
this.clipBehavior = Clip.none,
this.materialTapTargetSize,
//shape和elevation的动画更改持续时间
this.animationDuration,
this.minWidth,
this.height,
this.child,
}) :super(key:key)

RaisedButton

浮起的按钮。默认带有阴影和灰色背景,按下后阴影变大

FlatButton

扁平的按钮。默认背景透明无阴影,按下后有背景色

OutlineButton

介于RaisedButton和OutlineButton之间的按钮。背景透明无阴影。按下后,边框颜色变亮,且出现背景和阴影

IconButton

图标按钮。默认无背景,点击后出现背景