一,概述

  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. Invalid bound statement (not found)错误

    都对着,为什么会报这个错呢,mapper也拿到了,为什么查询时出错呢,最后看target里编译的文件发现少了mapping,xml没编译过去. 我的目录结构:dao层都编译过去了,但mapper.xm ...

  2. linux系统下jdk安装配置

    1.有jdk包(linux版) 2.放到linux系统下 3.建议在usr下新建jdk目录之后将jdk文件放到该目录下 3.配置系统信息   /etc/profile 需要配置的信息如下:#set j ...

  3. 【靶场练习_sqli-labs】SQLi-LABS Page-2 (Adv Injections)

    Less-21:括号+单引号绕过+base64cookie编码 总感觉我已经把sql注入做成代码审计了:P <?php //including the Mysql connect paramet ...

  4. Centos7.4 配置之MySQL 8.0【转】

    首先查看Mysql最新版本, 此时,目前最新版本为8.0. 开始安装前需要一些准备工作. 1,将本地的MariaDB或者已经安装的MySQL其他版本卸载. (一)卸载本地的本地的MariaDB: 由于 ...

  5. SyntaxError: missing ] after element list

    在前端页面js报错,找了很久没找到原因. 后来发现是后台向前端输出json字符串,而前端接收是html格式,需要将后台json字符串改成正常字符串就可以输出,或者通过ajax的方式接收json字符串.

  6. Workflow:Workflow 百科

    ylbtech-Workflow:Workflow 百科 工作流(Workflow),指“业务过程的部分或整体在计算机应用环境下的自动化”.是对工作流程及其各操作步骤之间业务规则的抽象.概括描述.在计 ...

  7. 建站手册-浏览器信息:Mozilla 项目

    ylbtech-建站手册-浏览器信息:Mozilla 项目 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_mozilla.asp 2. ...

  8. 建议66,67 注意Arrays.asList()的使用

    代码 public static void main(String[] args) { int[]data = {1,2,3,4,5}; List list = Arrays.asList(data) ...

  9. Html5 学习笔记 --》html基础 css 基础

    HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...

  10. txt文本程序 打开python文件 另存为原来的文件名,不能覆盖原来的文件解决

    txt文本程序 打开python文件 另存为原来的文件名,不能覆盖原来的文件 如:1.py文件用txt文本程序打开后,另存为 1.py,保存完毕后,不覆盖1.py文件,会生成 1.py.txt文件 原 ...