【Flutter学习】基本组件之BottomNavigationBar底部导航栏
一,概述
BottomNavigationBar
即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签、图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航。
二,Bar关键元素
- BottomNavigationBar
- BottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用。
- BottomNavigationBar构造方法
BottomNavigationBar({
Key key,
@required this.items,
this.onTap,
this.currentIndex = ,
BottomNavigationBarType type,
this.fixedColor,
this.iconSize = 24.0,
}) - BottomNavigationBar 参数含义
- BottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用。
- BottomNavigationBarItem
- 底部导航栏要显示的Item,有图标和标题组成
- BottomNavigationBarItem构造方法
const BottomNavigationBarItem({
@required this.icon,
this.title,
Widget activeIcon,
this.backgroundColor,
}) - BottomNavigationBarItem 参数含义
三,实现过程
- 1.构建底部标签
// 导航图标
final List<BottomNavigationBarItem> bottomNavItems = [
new BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.home),
title: new Text("首页")
), new BottomNavigationBarItem(
backgroundColor: Colors.green,
icon: Icon(Icons.message),
title: new Text('消息')
), new BottomNavigationBarItem(
backgroundColor: Colors.amber,
icon: Icon(Icons.shopping_cart),
title: new Text("购物车")
), new BottomNavigationBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.person),
title: Text('个人中心')
)
]; - 2.构建导航显示的页面
//视图view
final pageViews = [
new HomePage(),
new MsgPage(),
new CartPage(),
new PersonPage()
]; - 2.创建底部导航栏
/** 如果点击的导航页不是当前项,切换*/
void _changePage(int index) {
if(index != currentIndex){
setState(() {
currentIndex = index;
});
}
} @override
Widget build(BuildContext context) {
// TODO: implement build
return new DefaultTabController(
length: myTabs.length,
child: new Scaffold(
appBar: new AppBar(
title: new Text('顶部标签栏'),
bottom: new TabBar(
indicatorColor: Colors.blue,
tabs: myTabs,
isScrollable: true,
),
), bottomNavigationBar: new BottomNavigationBar(
items: bottomNavItems,
currentIndex: currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (index) {
_changePage(index);
},
),
body: pageViews[currentIndex],
),
);
} - 3.完成
import 'package:flutter/material.dart';
import './HomePage.dart';
import './CartPage.dart';
import './MsgPage.dart';
import './PersonPage.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: '页面布局',
theme:new ThemeData(
primarySwatch: Colors.red
),
home: new App(),
);
}
} class App extends StatefulWidget { @override
State<StatefulWidget> createState() {
// TODO: implement createState
return new AppState();
}
} class AppState extends State<App> { // 导航图标
final List<BottomNavigationBarItem> bottomNavItems = [
new BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.home),
title: new Text("首页")
), new BottomNavigationBarItem(
backgroundColor: Colors.green,
icon: Icon(Icons.message),
title: new Text('消息')
), new BottomNavigationBarItem(
backgroundColor: Colors.amber,
icon: Icon(Icons.shopping_cart),
title: new Text("购物车")
), new BottomNavigationBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.person),
title: Text('个人中心')
)
]; int currentIndex; //视图view
final pageViews = [
new HomePage(),
new MsgPage(),
new CartPage(),
new PersonPage()
]; @override
void initState() {
super.initState();
currentIndex = ;
} /** 如果点击的导航页不是当前项,切换*/
void _changePage(int index) {
if(index != currentIndex){
setState(() {
currentIndex = index;
});
}
} @override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('顶部标签栏'),
), bottomNavigationBar: new BottomNavigationBar(
items: bottomNavItems,
currentIndex: currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (index) {
_changePage(index);
},
),
body: pageViews[currentIndex],
);
}
}
【Flutter学习】基本组件之BottomNavigationBar底部导航栏的更多相关文章
- Android学习总结——输入法将BottomNavigationBar(底部导航栏)顶上去的问题
在应用清单中给当前<Activity>设置: android:windowSoftInputMode="adjustPan" 关于android:windowSoftI ...
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
- 01 uni-app框架学习:项目创建及底部导航栏tabBar配置
1.创建一个项目类型选择uniapp 2. pages里新建3个页面如下 3.在pages.json中配置底部导航tabBar 效果展示:
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部
import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...
- 20个Flutter实例视频教程-第02节: 底部导航栏制作-2
视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...
- 底部导航栏使用BottomNavigationBar
1.github地址 https://github.com/zhouxu88/BottomNavigationBar 2.基本使用 2,1添加依赖 implementation 'com.ashokv ...
- Flutter——BottomNavigationBar组件(底部导航栏组件)
BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...
- Flutter 底部导航栏bottomNavigationBar
实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...
- Flutter移动电商实战 --(4)打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
随机推荐
- Invalid bound statement (not found)错误
都对着,为什么会报这个错呢,mapper也拿到了,为什么查询时出错呢,最后看target里编译的文件发现少了mapping,xml没编译过去. 我的目录结构:dao层都编译过去了,但mapper.xm ...
- linux系统下jdk安装配置
1.有jdk包(linux版) 2.放到linux系统下 3.建议在usr下新建jdk目录之后将jdk文件放到该目录下 3.配置系统信息 /etc/profile 需要配置的信息如下:#set j ...
- 【靶场练习_sqli-labs】SQLi-LABS Page-2 (Adv Injections)
Less-21:括号+单引号绕过+base64cookie编码 总感觉我已经把sql注入做成代码审计了:P <?php //including the Mysql connect paramet ...
- Centos7.4 配置之MySQL 8.0【转】
首先查看Mysql最新版本, 此时,目前最新版本为8.0. 开始安装前需要一些准备工作. 1,将本地的MariaDB或者已经安装的MySQL其他版本卸载. (一)卸载本地的本地的MariaDB: 由于 ...
- SyntaxError: missing ] after element list
在前端页面js报错,找了很久没找到原因. 后来发现是后台向前端输出json字符串,而前端接收是html格式,需要将后台json字符串改成正常字符串就可以输出,或者通过ajax的方式接收json字符串.
- Workflow:Workflow 百科
ylbtech-Workflow:Workflow 百科 工作流(Workflow),指“业务过程的部分或整体在计算机应用环境下的自动化”.是对工作流程及其各操作步骤之间业务规则的抽象.概括描述.在计 ...
- 建站手册-浏览器信息:Mozilla 项目
ylbtech-建站手册-浏览器信息:Mozilla 项目 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_mozilla.asp 2. ...
- 建议66,67 注意Arrays.asList()的使用
代码 public static void main(String[] args) { int[]data = {1,2,3,4,5}; List list = Arrays.asList(data) ...
- Html5 学习笔记 --》html基础 css 基础
HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...
- txt文本程序 打开python文件 另存为原来的文件名,不能覆盖原来的文件解决
txt文本程序 打开python文件 另存为原来的文件名,不能覆盖原来的文件 如:1.py文件用txt文本程序打开后,另存为 1.py,保存完毕后,不覆盖1.py文件,会生成 1.py.txt文件 原 ...