一,概述

  BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签、图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航。

二,Bar关键元素

  • BottomNavigationBar  

    • BottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用。
    • BottomNavigationBar构造方法
      1. BottomNavigationBar({
      2. Key key,
      3. @required this.items,
      4. this.onTap,
      5. this.currentIndex = ,
      6. BottomNavigationBarType type,
      7. this.fixedColor,
      8. this.iconSize = 24.0,
      9. })
    • BottomNavigationBar 参数含义

  • BottomNavigationBarItem
    • 底部导航栏要显示的Item,有图标和标题组成

    • BottomNavigationBarItem构造方法
      1. const BottomNavigationBarItem({
      2. @required this.icon,
      3. this.title,
      4. Widget activeIcon,
      5. this.backgroundColor,
      6. })
    • BottomNavigationBarItem 参数含义

三,实现过程

  • 1.构建底部标签

    1. // 导航图标
    2. final List<BottomNavigationBarItem> bottomNavItems = [
    3. new BottomNavigationBarItem(
    4. backgroundColor: Colors.blue,
    5. icon: Icon(Icons.home),
    6. title: new Text("首页")
    7. ),
    8.  
    9. new BottomNavigationBarItem(
    10. backgroundColor: Colors.green,
    11. icon: Icon(Icons.message),
    12. title: new Text('消息')
    13. ),
    14.  
    15. new BottomNavigationBarItem(
    16. backgroundColor: Colors.amber,
    17. icon: Icon(Icons.shopping_cart),
    18. title: new Text("购物车")
    19. ),
    20.  
    21. new BottomNavigationBarItem(
    22. backgroundColor: Colors.red,
    23. icon: Icon(Icons.person),
    24. title: Text('个人中心')
    25. )
    26. ];
  • 2.构建导航显示的页面
    1. //视图view
    2. final pageViews = [
    3. new HomePage(),
    4. new MsgPage(),
    5. new CartPage(),
    6. new PersonPage()
    7. ];
  • 2.创建底部导航栏
    1. /** 如果点击的导航页不是当前项,切换*/
    2. void _changePage(int index) {
    3. if(index != currentIndex){
    4. setState(() {
    5. currentIndex = index;
    6. });
    7. }
    8. }
    9.  
    10. @override
    11. Widget build(BuildContext context) {
    12. // TODO: implement build
    13. return new DefaultTabController(
    14. length: myTabs.length,
    15. child: new Scaffold(
    16. appBar: new AppBar(
    17. title: new Text('顶部标签栏'),
    18. bottom: new TabBar(
    19. indicatorColor: Colors.blue,
    20. tabs: myTabs,
    21. isScrollable: true,
    22. ),
    23. ),
    24.  
    25. bottomNavigationBar: new BottomNavigationBar(
    26. items: bottomNavItems,
    27. currentIndex: currentIndex,
    28. type: BottomNavigationBarType.fixed,
    29. onTap: (index) {
    30. _changePage(index);
    31. },
    32. ),
    33. body: pageViews[currentIndex],
    34. ),
    35. );
    36. }
  • 3.完成
    1. import 'package:flutter/material.dart';
    2. import './HomePage.dart';
    3. import './CartPage.dart';
    4. import './MsgPage.dart';
    5. import './PersonPage.dart';
    6.  
    7. void main() => runApp(MyApp());
    8.  
    9. class MyApp extends StatelessWidget {
    10. @override
    11. Widget build(BuildContext context) {
    12. // TODO: implement build
    13. return new MaterialApp(
    14. title: '页面布局',
    15. theme:new ThemeData(
    16. primarySwatch: Colors.red
    17. ),
    18. home: new App(),
    19. );
    20. }
    21. }
    22.  
    23. class App extends StatefulWidget {
    24.  
    25. @override
    26. State<StatefulWidget> createState() {
    27. // TODO: implement createState
    28. return new AppState();
    29. }
    30. }
    31.  
    32. class AppState extends State<App> {
    33.  
    34. // 导航图标
    35. final List<BottomNavigationBarItem> bottomNavItems = [
    36. new BottomNavigationBarItem(
    37. backgroundColor: Colors.blue,
    38. icon: Icon(Icons.home),
    39. title: new Text("首页")
    40. ),
    41.  
    42. new BottomNavigationBarItem(
    43. backgroundColor: Colors.green,
    44. icon: Icon(Icons.message),
    45. title: new Text('消息')
    46. ),
    47.  
    48. new BottomNavigationBarItem(
    49. backgroundColor: Colors.amber,
    50. icon: Icon(Icons.shopping_cart),
    51. title: new Text("购物车")
    52. ),
    53.  
    54. new BottomNavigationBarItem(
    55. backgroundColor: Colors.red,
    56. icon: Icon(Icons.person),
    57. title: Text('个人中心')
    58. )
    59. ];
    60.  
    61. int currentIndex;
    62.  
    63. //视图view
    64. final pageViews = [
    65. new HomePage(),
    66. new MsgPage(),
    67. new CartPage(),
    68. new PersonPage()
    69. ];
    70.  
    71. @override
    72. void initState() {
    73. super.initState();
    74. currentIndex = ;
    75. }
    76.  
    77. /** 如果点击的导航页不是当前项,切换*/
    78. void _changePage(int index) {
    79. if(index != currentIndex){
    80. setState(() {
    81. currentIndex = index;
    82. });
    83. }
    84. }
    85.  
    86. @override
    87. Widget build(BuildContext context) {
    88. // TODO: implement build
    89. return new Scaffold(
    90. appBar: new AppBar(
    91. title: new Text('顶部标签栏'),
    92. ),
    93.  
    94. bottomNavigationBar: new BottomNavigationBar(
    95. items: bottomNavItems,
    96. currentIndex: currentIndex,
    97. type: BottomNavigationBarType.fixed,
    98. onTap: (index) {
    99. _changePage(index);
    100. },
    101. ),
    102. body: pageViews[currentIndex],
    103. );
    104. }
    105. }

【Flutter学习】基本组件之BottomNavigationBar底部导航栏的更多相关文章

  1. Android学习总结——输入法将BottomNavigationBar(底部导航栏)顶上去的问题

    在应用清单中给当前<Activity>设置: android:windowSoftInputMode="adjustPan" 关于android:windowSoftI ...

  2. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

  3. 01 uni-app框架学习:项目创建及底部导航栏tabBar配置

    1.创建一个项目类型选择uniapp 2. pages里新建3个页面如下 3.在pages.json中配置底部导航tabBar 效果展示:

  4. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  5. 20个Flutter实例视频教程-第02节: 底部导航栏制作-2

    视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...

  6. 底部导航栏使用BottomNavigationBar

    1.github地址 https://github.com/zhouxu88/BottomNavigationBar 2.基本使用 2,1添加依赖 implementation 'com.ashokv ...

  7. Flutter——BottomNavigationBar组件(底部导航栏组件)

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

  8. Flutter 底部导航栏bottomNavigationBar

    实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...

  9. Flutter移动电商实战 --(4)打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

随机推荐

  1. 阿里下一代云分析型数据库AnalyticDB入选Forrester云化数仓象限

    前言 近期, 全球权威IT咨询机构Forrester发布"The Forrester Wave: CloudData Warehouse Q4 2018"研究报告,阿里巴巴分析型数 ...

  2. Java Web学习总结(6)Cookie/Session

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 二.会话过程中要解决的一些问题 每个用户在使用浏览器与服务器进行 ...

  3. 微信小程序相关操作

    显示用户基本信息 在微信小程序中,经常会碰到需要展示微信用户的基本信息,如果只是为了显示用户信息,最简单有效的办法是使用open-data,这是微信小程序内置的用于展示微信开放数据的组件,通过改变ty ...

  4. 使用Echarts中遇到值得记录的小案例(一)

    需求部分 在开发项目的时候遇到一个需求,就是如何保证echarts图表里至少显示一个图例的数据(也就是最后一个图例不能变成unselected的状态)下图是最初加载时的画面 不想出现图例都被点击取消导 ...

  5. CSS最基础的语法和三种引入方式

    **CSS语法** CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.选择器通常是您需要改变样式的 HTML 元素. selector {declaration1; declaration ...

  6. WEB服务端安全---注入攻击

    注入攻击是web领域最为常见的攻击方式,其本质是把用户输入的数据当做代码执行,主要原因是违背了数据与代码分离原则,其发生的两个条件:用户可以控制数据输入:代码拼接了用户输入的数据,把数据当做代码执行了 ...

  7. 数组中重复的数字(js实现)

    题目 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为7的 ...

  8. “希希敬敬对”队软件工程第九次作业-beta冲刺第六次随笔

    “希希敬敬对”队软件工程第九次作业-beta冲刺第六次随笔 队名:  “希希敬敬对” 龙江腾(队长) 201810775001 杨希                   201810812008 何敬 ...

  9. 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 ...

  10. LoadRunner内部结构(转)

    LoadRunner内部结构 1,            被测系统是由驱动进程mdrv.exe(多线程驱动的进程)和r3vuser.exe来产生压力的,其中r3vuser.exe仿真应用程序的客户端, ...