一,概述

  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 参数含义

  • 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底部导航栏的更多相关文章

  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. 洛谷P3372/poj3468(线段树lazy_tag)(询问区间和,支持区间修改)

    洛谷P3372 //线段树 询问区间和,支持区间修改 #include <cstdio> using namespace std; struct treetype { int l,r; l ...

  2. HDU 6053 TrickGCD —— 2017 Multi-University Training 2

    TrickGCD Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  3. [CF852H]Bob and stages

    题意:给出平面上\(n\)个点,要求选出\(k\)个点,使得这些点形成一个凸包,且凸包内部没有点,求最大面积.无解输出\(0\). 题解:枚举凸包最左的点\(p\),删除所有在\(p\)左边的点,然后 ...

  4. LocalActivityManager如何在一个Activity的一部分中显示其他Activity

    首先要使用该方法,页面必须继承ActivityGroup. 总的来说,实现"如何在一个Activity的一部分中显示其他Activity"除了LocalActivityManage ...

  5. SQL:REGEXP

    作为一个更为复杂的示例,正则表达式B[an]*s匹配下述字符串中的任何一个:Bananas,Baaaaas,Bs,以及以B开始.以s结束.并在其中包含任意数目a或n字符的任何其他字符串. 以下是可用于 ...

  6. 希尔排序(shell)理论---不含源码

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 希尔排序,是一个缩小增量排序.它根据步长来进行排序,步长不同可能会产生不同的序列,但是他们的最终结果是相同的,希尔排序的官方理论难以理解, ...

  7. JavaScript Stack

    function Stack() { var items = []; this.push = function(item) { items.push(item) } this.pop = functi ...

  8. intellij中maven不能导入pom文件中指定的jar包

    pom文件配置依赖的jar包版本,可以有默认的版本,如下 <profiles> <profile> <id>default_version</id> & ...

  9. mac bash上显示git分支与状态

    主要实现 显示当前路径 显示当前所在分支 显示当前修改状态 = 表示一个干净的分支 ~ 表示文件有改动 # 表示已commit 但未 push 通过网上搜索和自己根据实际需要修改的代码如下: .bas ...

  10. opencv图像的基本操作3

    1.获取像素并修改 读取一副图像,根据像素的行和列的坐标获取它的像素值,对于RGB图像而言,返回RGB的值,对于灰度图则返回灰度值 import cv2 import numpy img = cv2. ...