码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2020-02-22 00:43:32      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:gac   icons   doc   font   info   底部   child   shape   app   

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

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

标签:gac   icons   doc   font   info   底部   child   shape   app   

原文地址:https://www.cnblogs.com/zhaofeis/p/12343503.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!