【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 参数含义
- BottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用。
- BottomNavigationBarItem
- 底部导航栏要显示的Item,有图标和标题组成
- BottomNavigationBarItem构造方法
- const BottomNavigationBarItem({
- @required this.icon,
- this.title,
- Widget activeIcon,
- this.backgroundColor,
- })
- const BottomNavigationBarItem({
- BottomNavigationBarItem 参数含义
- 底部导航栏要显示的Item,有图标和标题组成
三,实现过程
- 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()
- ];
- //视图view
- 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],
- );
- }
- }
- import 'package:flutter/material.dart';
【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目录下,我们新建下面四 ...
随机推荐
- 阿里下一代云分析型数据库AnalyticDB入选Forrester云化数仓象限
前言 近期, 全球权威IT咨询机构Forrester发布"The Forrester Wave: CloudData Warehouse Q4 2018"研究报告,阿里巴巴分析型数 ...
- Java Web学习总结(6)Cookie/Session
一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 二.会话过程中要解决的一些问题 每个用户在使用浏览器与服务器进行 ...
- 微信小程序相关操作
显示用户基本信息 在微信小程序中,经常会碰到需要展示微信用户的基本信息,如果只是为了显示用户信息,最简单有效的办法是使用open-data,这是微信小程序内置的用于展示微信开放数据的组件,通过改变ty ...
- 使用Echarts中遇到值得记录的小案例(一)
需求部分 在开发项目的时候遇到一个需求,就是如何保证echarts图表里至少显示一个图例的数据(也就是最后一个图例不能变成unselected的状态)下图是最初加载时的画面 不想出现图例都被点击取消导 ...
- CSS最基础的语法和三种引入方式
**CSS语法** CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.选择器通常是您需要改变样式的 HTML 元素. selector {declaration1; declaration ...
- WEB服务端安全---注入攻击
注入攻击是web领域最为常见的攻击方式,其本质是把用户输入的数据当做代码执行,主要原因是违背了数据与代码分离原则,其发生的两个条件:用户可以控制数据输入:代码拼接了用户输入的数据,把数据当做代码执行了 ...
- 数组中重复的数字(js实现)
题目 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为7的 ...
- “希希敬敬对”队软件工程第九次作业-beta冲刺第六次随笔
“希希敬敬对”队软件工程第九次作业-beta冲刺第六次随笔 队名: “希希敬敬对” 龙江腾(队长) 201810775001 杨希 201810812008 何敬 ...
- Fatal Error -26000: Not enough memory (12320 bytes) for “new buffer in LrwSrvNetTaskIt 问题解决及lr脚本心得
Fatal Error -26000: Not enough memory (12320 bytes) for “new buffer in LrwSrvNetTaskIt 问题解决及lr脚本心得 2 ...
- LoadRunner内部结构(转)
LoadRunner内部结构 1, 被测系统是由驱动进程mdrv.exe(多线程驱动的进程)和r3vuser.exe来产生压力的,其中r3vuser.exe仿真应用程序的客户端, ...