Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏
2024-09-20 23:12:30
FloatingActionButton 简称 FAB，从字面理解可以看出，它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙，只是我们没有正式的接触。
一般来说，它是一个圆形，中间放着图标，会优先显示在其他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,
不规则的底部导航栏完整代码如下：
import 'package:flutter/material.dart';
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的子页
最新文章
- 关于jni编译32位、64位动态库（Android.mk和Application.mk文件）
- PHP操作MySQL数据库5个步骤
- Sina 新浪Ip归属地Api 很好用的，使用get请求
- 从系统的gallery获取图片
- MVC3和MVC4相关问题
- A trip through the graphics pipeline 2011 Part 10(翻译)
- poj 1850 code(组合数学)
- sublime 正则搜索日语字符
- 【转】Java中如何遍历Map对象的4种方法
- 【温故而知新-JQ的节点类型】
- xtrabackup执行备份要拥有的权限
- 发送请求工具—Advanced REST Client
- javascript 函数和作用域（函数，this）（六）
- 物联网RFID技术之应用ETC系统
- python科学计算库numpy和绘图库PIL的结合,素描图片(原创)
- Pycharm出现的部分快捷键无效问题及解决办法
- 在centos6.5安装pg
- 手机网络抓包 转载记录http://blog.csdn.net/skylin19840101/article/details/43485911
- 菜鸟级渣渣 关于MAC系统开发java的吐槽
- VUE 2.0在IE中打开页面空白的原因及解决方法