一、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 底部导航凸起按钮的更多相关文章

  1. 23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮:

    /* 一.Flutter FloatingActionButton介绍 FloatingActionButton简称FAB,可以实现浮动按钮,也可以实现类型闲鱼app的底部凸起导航. child:子视 ...

  2. 自己动手制作的淘宝闲鱼APP宝贝数据采集工具软件

    之前做过淘宝PC端宝贝和店铺数据的采集,后来需要做APP端的数据采集,因为没有学过Android,以前也都是做PC端的软件,有没有其他方法呢? 突然想到了用手机模拟器,可以在电脑端控制运行手机APP端 ...

  3. OnSen UI结合AngularJs打造”美团"APP底部导航栏 --Hybrid App

    1.页面效果图:(点击底部导航按钮,可切换到不同的页面) 演示地址:http://www.nxl123.cn/bokeyuan/2018080301/meiTuanDemo/ 2.项目目录结构 3.核 ...

  4. react native 使用TabNavigator编写APP底部导航

    第一步,下载依赖 npm install react-native-tab-navigator --save 第二步,引入 import TabNavigator from 'react-native ...

  5. GMTC2019|闲鱼-基于Flutter的架构演进与创新

    2012年应届毕业加入阿里巴巴,主导了闲鱼基于Flutter的新混合架构,同时推进了Flutter在闲鱼各业务线的落地.未来将持续关注终端技术的演变及趋势 Flutter的优势与挑战 Flutter是 ...

  6. Flutter 底部导航栏bottomNavigationBar

    实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...

  7. Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果

    在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...

  8. Flutter——BottomNavigationBar组件(底部导航栏组件)

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

  9. 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化

    效果: /**  * Flutter  BottomNavigationBar 自定义底部导航条.以及实现页面切换:  * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...

随机推荐

  1. C#继承是个啥

    继承: 字面意思就是继承 如地主老王有500亩地,老王的儿子小王可以种这五百亩地可以随便拿这五百亩地上面的任何东西 如Controller 你要用从一个controller调用另一个controlle ...

  2. centos7重启Mysql命令

    执行命令/etc/init.d/mysql restart重启Mysql服务器

  3. Selenium3+python自动化013-操作浏览器的Cookie

    为什么要用Cookie?在测试多个页面时候可绕过验证码输入,直接添加cookie,也可以在添加唯一标识时候使用. 一.操作浏览器的Cookie 1.1.验证码的处理方式 说明:WebDriver类库中 ...

  4. Yii2 JWT

    Yii2 JWT 这个扩展为Yii framework 2.0提供了JWT集成(需要PHP 5.6+).它包括基本的HTTP身份验证支持. 目录 安装 依赖关系 基本用法 创建 从字符串分析 验证 令 ...

  5. SpringMVC流程图示

  6. 修改json数据中key(键值)

    //方法一:修改JSONObject的键 public static JSONObject changeJsonObj(JSONObject jsonObj,Map<String, String ...

  7. 3-在Django中使用使用数据库

    数据库设置 在上一章节中学习了如何创建Django项目,在Django项目中创建web应用,以及如何在Django主程序的URL中引用web应用中的URL.下面来了解如何在Django中使用数据库.D ...

  8. LED Decorative Light Supplier - LED Environmental Decorative Lighting Application

    Creating ambient lighting in the home can bridge the gap between the internal world and the outside ...

  9. HTML网站右键禁用F12代码 屏蔽审查元素 防止修改页面代码

    <script>//禁止右键 function click(e) { if (document.all) { if (event.button==2||event.button==3) { ...

  10. 【AHOI2005】约数研究

    发现luogu的UI改版后AC以后不能给题目评定难度了…… P1403 [AHOI2005]约数研究 类似素数筛的一道题,不过是约数. 先顺手写了个暴力做法,TLE定了~ #include<bi ...