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

Posted 2021-03-08 zhaofeis

一、Flutter FloatingActionButton 介绍

FloatingActionButton 简称 FAB,可以实现浮动按钮，也可以实现类似闲鱼 app 的地步凸起导航

 

child  子视图，一般为 Icon，不推荐使用文字

tooltip FAB 被长按时显示，也是无障碍功能

backgroundColor  背景颜色

elevation  未点击的时候的阴影

hignlightElevation  点击时阴影值，默认 12.0

onPressed  点击事件回调

shape 可以定义 FAB 的形状等

mini  是否是 mini 类型默认 false

 

二、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,