重点:
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. SAP WM 有无保存WM Level历史库存的Table?

    SAP WM 有无保存WM Level历史库存的Table? 前日下班回家的路上,收到一个前客户内部顾问同行发过来的微信,问我在SAP系统里哪个表是用来存储WM Level历史库存的. 这个问题问住了 ...

  2. 17.Odoo产品分析 (二) – 商业板块(10) – 电子商务(1)

    查看Odoo产品分析系列--目录 安装电子商务模块 1. 主页 点击"商店"菜单:  2. 添加商品 在odoo中,你不用进入"销售"模块,再进入产品列表添加产 ...

  3. GPA简介

    GPA(Graphics Performance Analyzers)是Intel公司提供的一款免费的跨平台性能分析工具. 填写e-mail.name和country并提交后,就会收到一封有专属下载链 ...

  4. mssql sqlserver存储过程专题

    MSSQL存储过程简介及创建方式 mssql_DB_存储过程类型简介   MSSQL sql存储过程创建简介及应用举例 MSSQL SQl server 2008 CLR 存储过程创建举例 MSSQL ...

  5. spring applicationContext.xml最全约束

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. 自动化测试基础篇--Selenium中JS处理滚动条

    摘自https://www.cnblogs.com/sanzangTst/p/7692285.html 前言 什么是JS? JS就是JavaScript: JavaScript 是世界上最流行的脚本语 ...

  7. mysql中导入导出sql文件

    1.导出整个数据库: mysqldump -u用户名 -p密码 数据库名 > 导出的文件名 例:mysqldump -uroot -proot user > user.sql 2.导出一个 ...

  8. python 制作一对一聊天

    用到的参考资料 https://blog.csdn.net/jia666666/article/details/81624550 https://blog.csdn.net/jia666666/art ...

  9. ASP.NET -- WebForm -- HttpResponse 类的方法和属性

    ASP.NET -- WebForm -- HttpResponse 类的方法和属性 1. HttpResponse 类的方法 (1) AddCacheDependency: 将一组缓存依赖项与响应关 ...

  10. June 3. 2018 Week 23rd Sunday

    You only get one shot; do not miss your chance to blow. 机会只有一次,不要错过. From Eminem, "Lose Yoursel ...