100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > h5 右下角浮动按钮_Flutter 浮动按钮-FloatingActionButton的使用

h5 右下角浮动按钮_Flutter 浮动按钮-FloatingActionButton的使用

时间:2021-07-01 03:04:47

相关推荐

h5 右下角浮动按钮_Flutter 浮动按钮-FloatingActionButton的使用

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: () {}),

],

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。