FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮

时间:2021-02-12 18:48:10

一、Flutter FloatingActionButton 介绍 FloatingActionButton 简称 FAB,可以实现浮动按钮,也可以实现类似闲鱼 app 的地步凸起导航   child  子视图,一般为 Icon,不推荐使用文字 tooltip FAB 被长按时显示,也是无障碍功能 backgroundColor  背景颜色 elevation  未点击的时候的阴影 hignlightElevation  点击时阴影值,默认 12.0 onPressed  点击事件回调 shape 可以定义 FAB 的形状等 mini  是否是 mini 类型默认 false   二、FloatingActionButton 实现闲鱼 app底部凸起按钮   案例 FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮

 

 

案例代码

floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 1),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
),
Container(
margin: EdgeInsets.only(bottom: 5),
child: Text(‘发布‘, style: TextStyle( color: Colors.grey, fontSize: 13),),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,