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 ...
随机推荐
- iphone手机投屏在哪里 手机无线投屏电脑
Iphone是我们经常使用的一款手机,有时候经常需要将一些文件图片信息等投屏到电脑,那么iphone手机投屏在哪里?可以无线投屏到电脑吗?其实很简单,下面就分享下苹果手机投屏的具体方法给大家,希望对大 ...
- ViewPager结合Fragment进行无限滑动
实现ViewPager结合Fragment实现无限循环切换,这里也是在适配器里面进行的,当然使用滑动监听也能够实现 import android.support.v4.app.Fragment; im ...
- Android沉浸式状态栏的简单实现
随着卡片式设计在Android系统的上越来越流行,比如现在早已经烂大街的沉浸式状态栏,几乎所有的主流的APP都支持沉浸式状态栏,如QQ.UC浏览器等等.所以觉得有必要学习一下,找了点资料,总结了一下, ...
- mysql 获取一张表中, 另一张表不存在的数据
编写sql语句中,经常需要编写获取一张数据表中不存在与另一张表的数据,相关编写方法如下: 方法1: 使用not in ,效率低下,在数据较小的情况下可以采用如下编写 SELECT * FROM a A ...
- 云ERP真的靠谱吗?
现在几乎每个IT系统或项目都要跟云挂上钩,跟数码产品必与“智能”扯上关系一样,否则在外行甚至同行眼里就是“矮小搓”.ERP领域也悄然刮起了云端化.国内ERP产品也借此机会想弯道超车,通过云化来抢夺被S ...
- MSSQL coalesce系统函数简介
转自:http://www.maomao365.com/?p=4390 一.coalesce函数简介 coalesce 系统函数,比ISNULL更强大,更方便的系统函数,coalesce可以接收多个参 ...
- SQL Server "允许远程连接到此服务器" 配置
在SQL Server的属性-->连接中我们可以看到这样一个选项:'允许远程连接到此服务器'(英文是remote access),其默认值是1,表示此选项开启. 但是这个参数并非是字面上所显示的 ...
- C# -- 交错数组的使用
C# -- 交错数组的使用 交错数组是元素为数组的数组.交错数组元素的维度和大小可以不同.交错数组有时称为“数组的数组”. 1. 举例一:子数组是长度相同的一维数组 static void Main( ...
- Java入门(一):Hello World !
前言 从今天开始,准备写Java Web开发的系列文章,毕竟自己主攻的还是Java方向,Python只是业余学习的兴趣使然,在第二技能还没有培养成熟前,做好第一技能的巩固和提高是很有必要的.从正式入行 ...
- February 23rd, 2018 Week 8th Friday
It takes a strong man to save himself, and a great man to save another. 强者自救,圣者渡人. When you are not ...