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的子页

Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏的更多相关文章

  1. Flutter中的浮动按钮 FloatingActionButton

    FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 . 常用属性 FloatingActionButton的常用属性,同flutte ...

  2. Android 浮动按钮+上滑隐藏按钮+下滑显示按钮

    1.效果演示 1.1.关注这个红色的浮动按钮 . 可以看到,上滑的时候浮动按钮消失,因为用户迫切想知道下面的东西,而不是回到顶部. 当下滑的时候,用户想回到原来的位置,就可以点击浮动按钮,快速回到顶部 ...

  3. Qt浮动按钮的实现(使用窗口背景透明、实现只显示浮动按钮的目的)

    Qt浮动按钮的实现 效果如下: 图3 估计很多做Qt有一定经验的朋友会觉得这个效果不难,但是这是一个需求奇葩的实际业务中做出的效果.笔者会想讲下客户的需求和整体框架的矛盾. 整个项目主要是由Qt搭建的 ...

  4. Flutter——FloatingActionButton组件(浮动按钮组件)

    FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的地步凸起导航.     属性名称 属性值 child 子视图,一般为 Icon,不推荐使用文字 ...

  5. Flutter 中的常见的按钮组件 以及自定义按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...

  6. flutter中的按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...

  7. Flutter 中的常见的按钮组件 以及自 定义按钮组件

    一.Flutter 中的按钮组件介绍   Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.   IconButton.Outlin ...

  8. Flutter基础Widget之按钮(RaisedButton、FlatButton、OutlineButton,IconButton)

    Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自Ma ...

  9. 理解 Flutter 中的 Key

    概览 在 Flutter 中,大概大家都知道如何更新界面视图: 通过修改 Stata 去触发 Widget 重建,触发和更新的操作是 Flutter 框架做的. 但是有时即使修改了 State,Flu ...

随机推荐

  1. Lua 学习之基础篇三<Lua 字符串操作>

    Lua字符串可以使用以下三种方式表示: 单引号间的一串字符. 双引号间的一串字符. [[和]]间的一串字符. string = [["Lua"]] print("字符串 ...

  2. ASP.Net页面生存周期、Page_Load方法

    一.ASP.Net Web应用程序中的请求处理过程 二. http模块生命周期: 三.Asp.NET页面生命周期 1.阶段 阶段 说明 请求页面(Page Request) 严格地说,这个阶段不是页面 ...

  3. Linux-删除文件空间不释放问题解决

    场景描述: 收到zabbix监控报警,晋中生产机器出现磁盘空间不足报警. 远程到该服务器,排查占员工磁盘空间的原因,发现tomcat日志过多,于是清除3天前的日志. 日志清理后,发现磁盘空间没有释放, ...

  4. 使用jaxb用xsd生成java类

    命令: xjc -p 包的路径 xsd的名字.xsd -d 目标的文件夹 具体详细见: http://www.iteye.com/topic/1118082

  5. C# 动态加载程序集

    定义动态程序集 namespace DynamicAssembly { public class CodeDriver : MarshalByRefObject { private string pr ...

  6. 浅析pagehelper分页原理(转)

    之前项目一直使用的是普元框架,最近公司项目搭建了新框架,主要是由公司的大佬搭建的,以springboot为基础.为了多学习点东西,我也模仿他搭了一套自己的框架,但是在完成分页功能的时候,确遇到了问题. ...

  7. map填充bean赋值,包括父类全部填充。

    有不少工具类给bean填充值.但是填充,很多都是只能填充到当前类的对象.经过需求修改,做了个工具类: import java.lang.reflect.Field; import java.lang. ...

  8. 【题解】[Nwerc 2006]escape -C++

    Description 给出数字N(1<=N<=10000),X(1<=x<=1000),Y(1<=Y<=1000),代表有N个敌人分布一个X行Y列的矩阵上 矩形的 ...

  9. 关于不用Hashtable

    hashmap 与hashtable 很类似,主要区别是hashtable 有用synchronized进行线程同步,hashmap没有.然而,建议少用hashtable,在单线程中,无需做线程控制, ...

  10. 028_切割 Nginx 日志文件(防止单个文件过大,后期处理很困难)

    mkdir /data/scriptsvim /data/scripts/nginx_log.sh #!/bin/bashlogs_path="/usr/local/nginx/logs/& ...