BottomNavigationBar
重点:
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的更多相关文章
- bottomNavigationBar 底部导航tab MD
1.先上图: 此底部Tab完全可以满足日常的开发 2.使用: 很简单,使用Gradle构建:compile ‘com.ashokvarma.android:bottom-navigation-bar: ...
- Android BottomNavigationBar导航栏
基本属性 setActiveColor //选中item的字体颜色 setInActiveColor //未选中Item中的颜色 setBarBackgroundColor//背景颜色 setMode ...
- TabBar用到bottomNavigationBar
import 'package:flutter/material.dart';import 'homepage.dart';import 'lastpage.dart';import 'secondp ...
- 5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换
1.前言 首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是: 做一个 viewpager 一组 Fragment 每个 Fragment 绑定一个 xml 最后填充至 viewp ...
- BottomNavigationBar + BottomNavigationBarItem导航的另外一种用法
import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; ...
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部
import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
- BottomNavigationBar 底部导航控件
BottomNavigationBar 底部导航控件 属性 说明BottomNavigationBarItem 多个 item,iconSize icon大小currentIndex 默认选中第几个o ...
- Android BottomNavigationBar底部导航控制器的使用(包含默认postion的设置)
转载请标明出处:http://blog.csdn.net/u010046908/article/details/50962081本文出自:[李东的博客] 最近Google在自己推出的Material ...
随机推荐
- 2017-11-07 中文代码示例之Angular入门教程尝试
"中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...
- HTML琐碎知识点(持续补充)
一.table标签 <table> <thead> <tr> <th>111</th> </tr> </thead> ...
- C# 利用PrintDocument定制打印单据
本文是利用PrintDocument定制打印单据的小例子,仅供学习分享使用,如果不足之处,还请指正. 涉及知识点: PrintDocument :从 Windows 窗体应用程序打印时,定义一种可重用 ...
- Flutter 动画详解(一)
本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍 动画对于App来说,非常的重要.很多App,正是因为有了动画,所以才 ...
- Quill Editor使用公式
const katex = require('katex'); const win: any = window; win.katex = katex; 首先,引入katex @import '~kat ...
- NoHttp封装--08 用一个实体类接收所有接口数据
1.用户信息获取--bean实体类形式返回数据 ①服务器端: 代码: protected void onHandler(HttpServletRequest request, HttpServletR ...
- pyinstaller使用错误 SyntaxError: Non-UTF-8 code starting with '\xb4' in file C:......
注:我的博客原本在CSDN,现转到博客园,图片采用以前的图片,并没有盗图. 在将.py文件打包时,出现了下列错误 >>C:\Users\小呆\PycharmProjects\pycha ...
- Android--获取手机联系人和Sim卡联系人
最近公司做的一个放贷APP,要求后台偷偷获取用户的联系人来做风控,所以...(大家忽略就好) 获取手机联系人很简单,就是查询android的数据库,用到的是ContentProvider进行跨进程通讯 ...
- matlab练习程序(旋转矩阵、欧拉角、四元数互转)
欧拉角转旋转矩阵公式: 旋转矩阵转欧拉角公式: 旋转矩阵转四元数公式,其中1+r11+r22+r33>0: 四元数转旋转矩阵公式,q0^2+q1^2+q2^2+q3^2=1: 欧拉角转四元数公式 ...
- python里用变量命名改善代码质量
编程时,总会遇到各种各样的变量,取一个好的变量名能够有效提高代码的可读性,而且python是一种,动态类型的语言,良好的变量名,能够在编写代码或者再次阅读代码时提高效率. 1. 变量名不要太宽泛,要有 ...