Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏
一般来说,它是一个圆形,中间放着图标,会优先显示在其他Widget的前面。一般可以实现浮动按钮,也可以实现类似闲鱼 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{
@override
Widget build(BuildContext context) {
return MaterialApp(
home:HomeContent(),
);
}
} class HomeContent extends StatelessWidget{
int _counter = ; //声明计数器 void _incrementCounter(){
setState(() { _counter++; });
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("flutter demo")
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('点一次增加一个数字'),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
FloatingActionButton与BottomAppBar的结合
我们来看一下floatingActionButton
的主要代码:
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
return EachView('New Page');
}));
},
tooltip: 'Increment',
child: Icon(
Icons.add,
color: Colors.white,
),
),
写完这些代码已经有了一个悬浮的按钮,但这个悬浮按钮还没有和低栏进行融合,这时候需要一个属性。
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
不规则的底部导航栏完整代码如下:
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
} class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: BottomAppBarDemo(), //不规则的底部导航
);
}
} class BottomAppBarDemo extends StatefulWidget {
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
} class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _eachView;
int _index = ;
@override
void initState() {
_eachView = List();
_eachView..add(EachView('Home'))..add(EachView('User'));
super.initState();
} @override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton( //浮动交互按钮
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
return EachView('New Page');
} ));
},
tooltip: '新建页', //长按提示
backgroundColor:Colors.red, //背景颜色
child:Icon(Icons.add,color: Colors.white,)
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //融合底部工具栏
bottomNavigationBar: BottomAppBar( //底部工具栏
color: Colors.red,
shape: CircularNotchedRectangle(), //圆形缺口
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:MainAxisAlignment.spaceAround ,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
color: Colors.white,
onPressed: (){
setState(() {
_index = ;
});
},
),
IconButton(
icon: Icon(Icons.airplay),
color: Colors.white,
onPressed: (){
setState(() {
_index = ;
});
},
), ],
),
),
body:_eachView[_index],
);
}
} class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
_EachViewState createState() => _EachViewState();
} class _EachViewState extends State<EachView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget._title)),
body: Center(
child: Text(widget._title),
),
);
}
}
如果还是跳上次的子页,代码如下:
void initState() {
_eachView = List();
_eachView
// ..add(EachView('Home'))
// ..add(EachView('User'));
..add(Contacts())
..add(Personal());
super.initState();
}
还要记得头部要import的子页
Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏的更多相关文章
- Flutter中的浮动按钮 FloatingActionButton
FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 . 常用属性 FloatingActionButton的常用属性,同flutte ...
- Android 浮动按钮+上滑隐藏按钮+下滑显示按钮
1.效果演示 1.1.关注这个红色的浮动按钮 . 可以看到,上滑的时候浮动按钮消失,因为用户迫切想知道下面的东西,而不是回到顶部. 当下滑的时候,用户想回到原来的位置,就可以点击浮动按钮,快速回到顶部 ...
- Qt浮动按钮的实现(使用窗口背景透明、实现只显示浮动按钮的目的)
Qt浮动按钮的实现 效果如下: 图3 估计很多做Qt有一定经验的朋友会觉得这个效果不难,但是这是一个需求奇葩的实际业务中做出的效果.笔者会想讲下客户的需求和整体框架的矛盾. 整个项目主要是由Qt搭建的 ...
- Flutter——FloatingActionButton组件(浮动按钮组件)
FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的地步凸起导航. 属性名称 属性值 child 子视图,一般为 Icon,不推荐使用文字 ...
- Flutter 中的常见的按钮组件 以及自定义按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...
- flutter中的按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...
- Flutter 中的常见的按钮组件 以及自 定义按钮组件
一.Flutter 中的按钮组件介绍 Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.Outlin ...
- Flutter基础Widget之按钮(RaisedButton、FlatButton、OutlineButton,IconButton)
Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自Ma ...
- 理解 Flutter 中的 Key
概览 在 Flutter 中,大概大家都知道如何更新界面视图: 通过修改 Stata 去触发 Widget 重建,触发和更新的操作是 Flutter 框架做的. 但是有时即使修改了 State,Flu ...
随机推荐
- Lua 学习之基础篇三<Lua 字符串操作>
Lua字符串可以使用以下三种方式表示: 单引号间的一串字符. 双引号间的一串字符. [[和]]间的一串字符. string = [["Lua"]] print("字符串 ...
- ASP.Net页面生存周期、Page_Load方法
一.ASP.Net Web应用程序中的请求处理过程 二. http模块生命周期: 三.Asp.NET页面生命周期 1.阶段 阶段 说明 请求页面(Page Request) 严格地说,这个阶段不是页面 ...
- Linux-删除文件空间不释放问题解决
场景描述: 收到zabbix监控报警,晋中生产机器出现磁盘空间不足报警. 远程到该服务器,排查占员工磁盘空间的原因,发现tomcat日志过多,于是清除3天前的日志. 日志清理后,发现磁盘空间没有释放, ...
- 使用jaxb用xsd生成java类
命令: xjc -p 包的路径 xsd的名字.xsd -d 目标的文件夹 具体详细见: http://www.iteye.com/topic/1118082
- C# 动态加载程序集
定义动态程序集 namespace DynamicAssembly { public class CodeDriver : MarshalByRefObject { private string pr ...
- 浅析pagehelper分页原理(转)
之前项目一直使用的是普元框架,最近公司项目搭建了新框架,主要是由公司的大佬搭建的,以springboot为基础.为了多学习点东西,我也模仿他搭了一套自己的框架,但是在完成分页功能的时候,确遇到了问题. ...
- map填充bean赋值,包括父类全部填充。
有不少工具类给bean填充值.但是填充,很多都是只能填充到当前类的对象.经过需求修改,做了个工具类: import java.lang.reflect.Field; import java.lang. ...
- 【题解】[Nwerc 2006]escape -C++
Description 给出数字N(1<=N<=10000),X(1<=x<=1000),Y(1<=Y<=1000),代表有N个敌人分布一个X行Y列的矩阵上 矩形的 ...
- 关于不用Hashtable
hashmap 与hashtable 很类似,主要区别是hashtable 有用synchronized进行线程同步,hashmap没有.然而,建议少用hashtable,在单线程中,无需做线程控制, ...
- 028_切割 Nginx 日志文件(防止单个文件过大,后期处理很困难)
mkdir /data/scriptsvim /data/scripts/nginx_log.sh #!/bin/bashlogs_path="/usr/local/nginx/logs/& ...