FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 。
常用属性
属性
说明
child
子视图,一般为 Icon,不推荐使用文字
tooltip
长按时显示的提示,也是无障碍功能
foregroundColor
前景色,影响到文字颜色
backgroundColor
背景颜色
elevation
未点击的时候的阴影
hignlightElevation
点击时阴影值,默认 12.0
onPressed
点击事件回调
shape
可以定义 FAB 的形状等
mini
是否是 mini 类型默认 false
FloatingActionButton 构造函数方式创建
floatingActionButton: FloatingActionButton(
onPressed: () => print("FloatingActionButton"),
child: IconButton(icon: Icon(Icons.add), onPressed: () {}),
tooltip: "按这么长时间干嘛",
foregroundColor: Colors.white,
backgroundColor: Colors.blue,
// elevation: 6.0,
// highlightElevation: 12.0,
shape: CircleBorder()),
实现效果图如下:
image.png
FloatingActionButton extended方式创建
floatingActionButton: FloatingActionButton.extended(
icon: Icon(Icons.alarm),
label: Text("文本"),
onPressed: () {},
),
实现效果图如下:
image.png
设置FloatingActionButton位置
属性:floatingActionButtonLocation
//centerDocked 底部中间
//endDocked 底部右侧
//centerFloat 中间偏上
//endFloat 底部偏上(默认)
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
了解其他:
//悬浮按钮动画
floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
//固定在下方显示的按钮
persistentFooterButtons: [
IconButton(icon: Icon(Icons.map), onPressed: () {}),
IconButton(icon: Icon(Icons.view_week), onPressed: () {}),
],