Flutter按钮[践]

Flutter 中没有 Button Widget,但提供了很多不同类型的 Child Button Widget;小菜分析源码整体可分为 RawMaterialButton 和 IconButton 两类;

其中 RaisedButton / FlatButton / OutlineButton 继承自 MaterialButton 且 MaterialButton 是对 RawMaterialButton 的封装;而BackButton / CloseButton / PopupMenuButton 继承自 IconButton;最终 RawMaterialButton 和 IconButton 都是由 ConstrainedBox 填充绘制;

alt text

RawMaterialButton 系列

所有Material 库中的按钮都有如下相同点:

  • 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。
  • 有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。

下面是源码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const RawMaterialButton({
Key key,
@required this.onPressed,
this.onHighlightChanged, // 高亮变化的回调
this.textStyle, // 文字属性
this.fillColor, // 填充颜色
this.highlightColor, // 背景高亮颜色
this.splashColor, // 水波纹颜色
this.elevation = 2.0, // 阴影
this.highlightElevation = 8.0, // 高亮时阴影
this.disabledElevation = 0.0, // 不可点击时阴影
this.padding = EdgeInsets.zero, // 内容周围边距
this.constraints = const BoxConstraints(minWidth: 88.0, minHeight: 36.0), // 默认按钮尺寸
this.shape = const RoundedRectangleBorder(), // 形状样式
this.animationDuration = kThemeChangeDuration, // 动画效果持续时长
this.clipBehavior = Clip.none, // 抗锯齿剪切效果
MaterialTapTargetSize materialTapTargetSize, // 点击目标的最小尺寸
this.child,
})

分析源码可知,RawMaterialButton 没有设置宽高的属性,可根据 padding 或外层依赖 Container 适当调整位置和大小;默认最小尺寸为 88px * 36px。

FloatingActionButton

FloatingActionButton 是 RawMaterialButton 的封装,主要用于浮动在屏幕内容之上,一般是位于底部左右角或中间;一般一个页面只有一个;

源码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const FloatingActionButton({
Key key,
this.child,
this.tooltip, // 长按提醒
this.foregroundColor, // 按钮上子元素颜色
this.backgroundColor, // 背景色
this.heroTag = const _DefaultHeroTag(), // Hero 动画标签
this.elevation = 6.0, // 阴影
this.highlightElevation = 12.0, // 高亮时阴影
@required this.onPressed,
this.mini = false, // 尺寸大小,分为 mini 和 default
this.shape = const CircleBorder(), // 样式形状
this.clipBehavior = Clip.none, // 抗锯齿剪切效果
this.materialTapTargetSize, // 点击目标的最小尺寸
this.isExtended = false, // 是否采用 .extended 方式
})

RaisedButton

源码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const RaisedButton({
Key key,
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme, // 按钮文字主题
Color textColor, // 子元素颜色
Color disabledTextColor, // 不可点击时子元素颜色
Color color, // 按钮背景色
Color disabledColor, // 不可点击时按钮背景色
Color highlightColor, // 点击高亮时按钮背景色
Color splashColor, // 水波纹颜色
Brightness colorBrightness, // 颜色对比度
double elevation, // 阴影高度
double highlightElevation, // 高亮时阴影高度
double disabledElevation, // 不可点击时阴影高度
EdgeInsetsGeometry padding, // 子元素周围边距
ShapeBorder shape, // 按钮样式
Clip clipBehavior = Clip.none, // 抗锯齿剪切效果
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration, // 动画时长
Widget child,
})

RaisedButton 即”漂浮”按钮,它默认带有阴影和灰色背景。按下后,阴影会变大,如图所示:
alt text
使用RaisedButton非常简单,如:

1
2
3
4
RaisedButton(
child: Text("normal"),
onPressed: () {},
);

FlatButton

源码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const FlatButton({
Key key,
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme, // 按钮文字主题
Color textColor, // 子元素颜色
Color disabledTextColor, // 不可点击时子元素颜色
Color color, // 按钮背景色
Color disabledColor, // 不可点击时按钮背景色
Color highlightColor, // 点击高亮时按钮背景色
Color splashColor, // 水波纹颜色
Brightness colorBrightness, // 颜色对比度
EdgeInsetsGeometry padding, // 子元素周围边距
ShapeBorder shape, // 按钮样式
Clip clipBehavior = Clip.none, // 抗锯齿剪切效果
MaterialTapTargetSize materialTapTargetSize,
@required Widget child,
})

1
2
3
4
5
6
7
8
9
10
//示例
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () {},
)

FlatButton即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色,如图3-11所示:
alt text

使用FlatButton也很简单,代码如下:

1
2
3
4
FlatButton(
child: Text("normal"),
onPressed: () {},
)

OutlineButton

源码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const OutlineButton({
Key key,
@required VoidCallback onPressed,
ButtonTextTheme textTheme, // 按钮文字主题
Color textColor, // 文字颜色
Color disabledTextColor, // 不可点击时文字颜色
Color color, // 按钮背景色
Color highlightColor, // 高亮时颜色
Color splashColor, // 水波纹颜色
double highlightElevation, // 高亮时阴影高度
this.borderSide, // 边框样式
this.disabledBorderColor, // 不可点击时边框颜色
this.highlightedBorderColor, // 高亮时边框颜色
EdgeInsetsGeometry padding, // 内容周围边距
ShapeBorder shape, // 按钮样式
Clip clipBehavior = Clip.none, // 抗锯齿剪切效果
Widget child,
})

分析源码可知,OutlineButton 与其他两种按钮略有不同,强调边框的样式属性且无长按的 tooltip 属性;
以下为 OutlineButton 特有属性:borderSide 代表边框样式;disabledBorderColor 代表不可点击时边框颜色;highlightedBorderColor 代表高亮时边框颜色;其中 borderSide 可以设置边框颜色宽度及样式(solid / none);
OutlineButton 还提供了 .icon 带图标的简单方式,icon / label 两个属性是必须属性;

OutlineButton默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱),如图所示:
alt text

使用OutlineButton也很简单,代码如下:

1
2
3
4
OutlineButton(
child: Text("normal"),
onPressed: () {},
)

IconButton 系列

IconButton 系列属于图标按钮,使用相对简单;其核心是 InkResponse 水波纹效果;

IconButton

源码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
const IconButton({
Key key,
this.iconSize = 24.0, // 图标大小
this.padding = const EdgeInsets.all(8.0), // 图标周围间距
this.alignment = Alignment.center, // 图标位置
@required this.icon, // 图标资源
this.color, // 图标颜色
this.highlightColor, // 点击高亮颜色
this.splashColor, // 水波纹颜色
this.disabledColor, // 不可点击时高亮颜色
@required this.onPressed,
this.tooltip // 长按提示
})

分析源码,其中 icon 和 onPressed 是必须要设置的,其余属性根据需求而适当调整;

IconButton是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景,如图3-13所示:
代码如下:

1
2
3
4
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
)

BackButton

BackButton 作用非常明确,一般用作返回上一个页面;

源码分析

1
const BackButton({ Key key, this.color })

分析源码,BackButton 继承自 IconButton,只允许设置图标颜色,图标样式 Android 与 iOS 不同且不可修改;点击时会优先判断 maybePop 是否可以返回上一页;

案例尝试

1
2
BackButton();
BackButton(color: Colors.green);

CloseButton

CloseButton 一般用作导航栏关闭按钮与 BackButton 类似;

源码分析

1
const CloseButton({ Key key }) : super(key: key);

分析源码,CloseButton 继承自 IconButton,无需设置任何属性;点击时会优先判断 maybePop 是否可以返回上一页;

案例尝试

1
CloseButton();