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 ...
随机推荐
- html 获取数据并发送给后端方式
一.方式一 使用ajax提交 function detailed() { var date = $("#asset_ip").text() $.ajax({ url: " ...
- JVM调优日志解析分析
一.调优参数设置 JVM的GC日志的主要参数包括如下几个: -XX:+PrintGC 输出GC日志 -XX:+PrintGCDetails 输出GC的详细日志 -XX:+PrintGCTimeStam ...
- 【爬虫】在使用xpath时,排除指定标签
xpath排除某个节点 主要时应用name()这个函数获取便签名 res = html.xpath("//*[name(.)!='style']")
- 章节七、4-Sets
一.set中不允许存在相同的元素 package ZangJie7; import java.util.ArrayList; import java.util.HashSet; import java ...
- ORA-01440: column to be modified must be empty to decrease precision or scale
在修改表字段的NUMBER类型的精度或刻度时,你可能会遇到ORA-01440: column to be modified must be empty to decrease precision or ...
- Spring(mvc)思维导图
spring mvc简介与运行原理 Spring的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器,并支持可配置的处理器 ...
- JAVA多线程的问题以及处理(二)【转】
使用互斥解决多线程问题是一种简单有效的解决办法,但是由于该方法比较简单,所以只能解决一些基本的问题,对于复杂的问题就无法解决了. 解 决多线程问题的另外一种思路是同步.同步是另外一种解决问题的思路,结 ...
- 通过一篇YAML来学习YAML
yaml 兼容 json,至今已发展至 1.2版.支持N多种编程语言.官网:http://www.yaml.org/ 格式在线校验:http://nodeca.github.io/js-yaml/ 下 ...
- MATLAB简易画图
给定一组特殊点,连线作图 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 以成绩隶属函数为例: score.m cj_x1=[ 0.1]; cj_y1= ...
- JavaScript数据类型之文本类型
引言 字符串(string)是一组由16位值组成的不可变的有序序列,每个字符通常来自于Unicode字符集.JavaScript通过字符串类型来表示文本.字符串的长度(length)是其所含16位值的 ...