重点:
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),//这个就是设置floatingactionbutton嵌入底部导航的设置;
下面是完整示例:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
} class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
leading: Icon(Icons.airplay),
backgroundColor: Colors.white70,
centerTitle: true,
title: Text(
'勇往直前',
style: TextStyle(
color: Colors.orange,
fontWeight: FontWeight.bold,
fontSize: 18,
fontStyle: FontStyle.italic,
),
),
),
bottomNavigationBar: BottomAppBar(
color: Colors.black12,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(icon: Icon(Icons.airplay,color: Colors.orange,),highlightColor: Colors.lightGreen, onPressed: (){}),
IconButton(icon: Icon(Icons.email,color: Colors.orange,),highlightColor: Colors.lightGreen, onPressed: (){}),
SizedBox(width: 55,),
IconButton(icon: Icon(Icons.save,color: Colors.orange,),highlightColor: Colors.lightGreen, onPressed: (){}),
IconButton(icon: Icon(Icons.add_a_photo,color: Colors.orange,),highlightColor: Colors.lightGreen, onPressed: (){}),
],
),
),
body:Container(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.white,
child: Icon(Icons.airplay,color: Colors.orange,),
onPressed: (){
setState(() { });
},
), );
}
}

BottomNavigationBar的更多相关文章

  1. bottomNavigationBar 底部导航tab MD

    1.先上图: 此底部Tab完全可以满足日常的开发 2.使用: 很简单,使用Gradle构建:compile ‘com.ashokvarma.android:bottom-navigation-bar: ...

  2. Android BottomNavigationBar导航栏

    基本属性 setActiveColor //选中item的字体颜色 setInActiveColor //未选中Item中的颜色 setBarBackgroundColor//背景颜色 setMode ...

  3. TabBar用到bottomNavigationBar

    import 'package:flutter/material.dart';import 'homepage.dart';import 'lastpage.dart';import 'secondp ...

  4. 5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换

    1.前言 首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是: 做一个 viewpager 一组 Fragment 每个 Fragment 绑定一个 xml 最后填充至 viewp ...

  5. BottomNavigationBar + BottomNavigationBarItem导航的另外一种用法

    import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; ...

  6. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  7. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  8. BottomNavigationBar 底部导航控件

    BottomNavigationBar 底部导航控件 属性 说明BottomNavigationBarItem 多个 item,iconSize icon大小currentIndex 默认选中第几个o ...

  9. Android BottomNavigationBar底部导航控制器的使用(包含默认postion的设置)

    转载请标明出处:http://blog.csdn.net/u010046908/article/details/50962081本文出自:[李东的博客] 最近Google在自己推出的Material ...

随机推荐

  1. IDEA项目搭建十三——服务消费端与生产端通信实现

    一.简介 之前已经完成了EurekaClient的服务生产者和Feign的服务消费者模块的搭建,现在实现统一的通信约定 (1) 统一Request结构 (2) 统一Response结构 (3) 统一E ...

  2. 使用fiddler抓包手机请求数据

    1.启动Fiddler,打开菜单栏中的 Tools > Fiddler Options,打开“Fiddler Options”对话框. 2.在Fiddler Options”对话框切换到“Con ...

  3. 第二章 运算方法与运算器(浮点数的加减法,IEEE754标准32/64浮点规格化数)

    这一章,主要介绍了好多种计算方法.下面,写一点自己对于有些计算(手写计算过程)的见解. 1.原码.反码.补码 原码:相信大家都会写,符号位在前二进制数值在后,凑够位数即可. 反码:原码符号位不变,其他 ...

  4. go 开发中需要注意的与python的不同点

    从python转golang开发已经3个月了,因为写过c++,所以对golang接受的还算快,这段经历也不是很痛苦.伯乐在线上看了一些大神关于python转golang过程中的不适应和吐槽,决定写下篇 ...

  5. HBase架构设计

    一.Client 包含访问HBase的接口并维护cache来加快对HBase的访问. 二.Zookeeper 1.保证任何时候,集群中只有一个master. 2.存储所有Region的寻址入口. 3. ...

  6. DBA思考系列——学会拒绝不合理的需求

    DBA思考系列--学会拒绝不合理的需求   一直以来,个性都比较随意,一般很少拒绝开发人员的一些需求(有点老好人的感觉). 这点一直被老大诟病,也一直在反省!最近又有一件事情,让我觉得:应该学会拒绝不 ...

  7. 洗礼灵魂,修炼python(71)--爬虫篇—【转载】xpath/lxml模块,爬虫精髓讲解

    Xpath,lxml模块用法 转载的原因和前面的一样,我写的没别人写的好,所以我也不浪费时间了,直接转载这位崔庆才大佬的 原帖链接:传送门 以下为转载内容: --------------------- ...

  8. hive笔记:复杂数据类型-array结构

    array 结构 (1)语法:array(val1,val2,val3,…)  操作类型:array array类型的数据可以通过'数组名[index]'的方式访问,index从0开始: (2)建表: ...

  9. Web GIS离线地图

    参考资料: http://www.cnblogs.com/luxiaoxun/p/5022333.html https://www.cnblogs.com/luxiaoxun/p/4454880.ht ...

  10. Windows 在命令行中将输出内容放到文件中

    1.将命令行中输出的内容存储到文件中. 使用重定向符号 “>” 就可以了. 通过 > 可以创建新文件并将内容放到文件中,如果文件存在,则会覆盖. 2.通过 >> 可以向已有的文 ...