Flutter中的浮动按钮 FloatingActionButton
FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 。
常用属性
FloatingActionButton的常用属性,同flutter中其他按钮的常用属性大部分相同,但是也有特殊的:
- child :子视图,一般为 Icon,不推荐使用文字
- tooltip FAB: 被长按时显示,也是无障碍功能
- backgroundColor: 背景颜色
- elevation :未点击的时候的阴影
- hignlightElevation :点击时阴影值,默认 12.0
- onPressed :点击事件回调
- shape :可以定义 FAB 的形状等
- mini: 是否是 mini 类型默认 false
基本使用
import 'package:flutter/material.dart';void main(){ runApp(MyApp());}class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home:Scaffold(appBar: AppBar(title:Text("flutter demo")),floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: (){print('FloatingActionButton');},),body:HomeContent() ));}
}class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[],);}
}
默认情况下,会在页面的右下角生成一个蓝色的浮动按钮,我们可以在此基础上,对颜色、位置等属性进行相应的修改:
FloatingActionButton与bottomNavigationBar的结合
通过FloatingActionButton与bottomNavigationBar的结合,我们可以实现类似闲鱼App的底部导航:
要实现上面的效果,有需要需要在前面的基础上添加bottomNavigationBar:
import 'package:flutter/material.dart';void main(){ runApp(MyApp());}class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(home:Scaffold(appBar: AppBar(title:Text("flutter demo")),floatingActionButton: FloatingActionButton(child: Icon(Icons.add,color: Colors.black,size: 40,),onPressed: (){print('FloatingActionButton');},backgroundColor: Colors.yellow),floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,body: Text("tabBar"),bottomNavigationBar: BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home),title: Text("首页")),BottomNavigationBarItem(icon: Icon(Icons.category),title: Text("分类")),BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text("设置"))],),));}
}
此时,浮动按钮是在bottomNavigationBar的上面的,因此,我们可以改动浮动按钮的位置,使效果更贴近理想效果:
现在,稍微好了一点,但是还没有达到理想的效果,既然位置改变不了,那么,可以通过改变大小,实现视觉的效果,前面说过,要想调节按钮的大小,需要在按钮的外层套一个Container,然后改变它的大小:
这个按钮和外面的Container是一样大的,但是在闲鱼App里面,按钮的外层是还有一圈白色边框的,也就是需要将Container设置为白色,并留出间距:
现在效果实现了,还可以结合之前的bottomNavigationBar,在浮动按钮上添加相应的功能:
Flutter中的浮动按钮 FloatingActionButton相关推荐
- 【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
文章目录 一.浮动按钮及点击事件 二.底部显示按钮组件 三.手势检测器组件 四.image_picker 完整代码示例 五.相关资源 一.浮动按钮及点击事件 一般使用 Scaffold 组件作为界面的 ...
- 浮动按钮FloatingActionButton
FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的所有属性.CoordinatorLayout可以用来配合Floa ...
- 可滑动的浮动按钮(FloatingActionButton)
概述 刚最近写了个浮动按钮和大家分享一下,只是在FloatingActionButton基础上做了点扩展,所以滑动范围仅限于父控件范围 使用效果 和正常用FloatingActionButton就可以 ...
- Flutter 中的常见的按钮组件 以及自 定义按钮组件、FloatingActionButton 实现类似 闲鱼 App 底部导航凸起按钮
文章目录 一. Flutter 中的按钮组件介绍 二. Flutter 按钮组件中的一些属性 三. Flutter FloatingActionButton 介绍 四. FloatingActionB ...
- Flutter 悬浮按钮 FloatingActionButton 的详细配置使用
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
- android shape 按钮背景_flutter好用的轮子推荐十三-flutter可展开选项的浮动按钮
前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!F ...
- 9_flutter_SimpleDialog(对话框),FloatingActionButton(浮动按钮),Slider(滑动器)
1_SimpleDialog(对话框) import 'package:flutter/material.dart'; import 'dart:async';void main(){runApp(M ...
- Flutter中的多选按钮组件Checkbox
Flutter 中的多选按钮组件有两种. 1. Checkbox 多选按钮,一般用来表现一些简单的信息. 常用属性如下: 1. value 多选的值: 2. onChanged 选择改变触发的事件: ...
- 在 Flutter 中实现一个浮动导航栏
写在前面 这段时间一直在学习 Flutter,在 dribble 上看到一张导航栏设计图,就是下面这张,感觉很是喜欢,于是思考着如何在 Flutter 中实现这个效果. 设计图作者:Lukáš Str ...
最新文章
- android intent-fliter用法
- 简易promise的实现(二)
- linux查看端口属性,linux如何查看系统属性指令?
- 对抗攻击之SMI-FGSM:北航提出用空间动量提高对抗迁移性
- 设计模式----简单工厂
- 安装apache重启的时候,报错端口被占用,错误1
- 数据绑定以及Container.DataItem几种方式与使用方法分析
- ZUL页面注解语法与Java注解语法
- c语言的异步回调函数,C语言函数的回调函数
- 同款视频一键制作生成微信小程序源码下载恶搞视频,特效视频,唯美视频等等
- Excel函数、快捷键等
- HBuilder手机Iphone运行提示“未受信用的企业级开发者”
- Java 危矣!统治地位已不复存在?
- 朋友圈一杠中间一个点_朋友圈看到这条线,大概率是被删了
- 【021】基于springboot的党务管理系统(含管理员、用户党支部三种身份(附源码数据库)
- html如何让网页全屏,如何把页面弄成全屏?
- 十大python培训机构
- C#实现自动更新之(程序升级包制作)
- VB中上传下载文件到SQL数据库
- Java中的图形界面编程-GUI
热门文章
- 相机帧率和曝光时间的关系
- ABB机器人RobotStudio示教器系统输入配置
- 7-4四种模型的解释_虚拟变量的设置以及交互项的解释
- DeFi 资管平台 Zapper 披露旧版“Polygon Bridge”合约存在漏洞
- 手把手教你挖掘数据:怎样创造一个“尿布与啤酒”的都市传奇?
- Invalid GIS data provided to function st_geometryfromtext. 解决方法
- Educational Codeforces Round 124 (Rated for Div. 2)
- Educational Codeforces Round 133 (Rated for Div. 2)
- 北斗开放平台,更加核心的语音压缩功能
- MyBatis实现mysql添加用户测试失败解决方法