Flutter 系列文章：Flutter BottomNavigationBar 控件介绍

时间  2019-11-07
标签 flutter 系列 文章 bottomnavigationbar 控件 介绍 繁體版
原文   原文链接

1、控件介绍

一个底部导航栏控件，用于进行不一样视图的切换，底部导航栏能够由文本、图标 或者二者结合的形式组成，底部导航栏统筹与Scaffold结合使用，它一般做为Scaffold.bottomNavigationBar参数提供。bash

2、使用方法

BottomNavigationBar（{
    Key key，
    @ required List < BottomNavigationBarItem > items，//放入导航栏的控件item列表长度items必须至少为2，每一个项目的图标和标题不得为空，
    ValueChanged < int > onTap，//点击导航栏子item的时候的
    int currentIndex：0，//当前活动BottomNavigationBarItem的项目 索引。
    double elevation：8.0，//设置z 轴坐标，设置了并无什么效果
    BottomNavigationBarType type，//底部导航栏的类型，有fixed和shifting两个类型，不一样类型显示效果不同
    Color fixedColor，//选中的时候的字体颜色，不能跟selectedItemColor 一块儿用
    Color backgroundColor，//导航栏背景颜色
    double iconSize：24.0，// icon的大小 ,设置了并木有效果
    Color selectedItemColor，//选中的时候的字体颜色，不能跟fixedColor 一块儿用
    Color unselectedItemColor，//未选中BottomNavigationBarItem标签 的字体大小
    IconThemeData selectedIconTheme： const IconThemeData（），//选中时的子Item的样式，这个不能跟BottomNavigationBarItem Icon 的colors 一块儿用，不然会以Icon 的colors为准，主题设置的不会生效，而且icon必须为官方的icon为主，不然也没法生效
    IconThemeData unselectedIconTheme： const IconThemeData（），              //未选中时的BottomNavigationBarItem.icon s中图标的大小，不透明度和颜色
    double selectedFontSize： 14.0，//选中的tab的字体的大小
    double unselectedFontSize： 12.0，//未选中BottomNavigationBarItem标签 的字体大小
    TextStyle selectedLabelStyle，//选中的时候的字体样式，设置了并无生效
    TextStyle unselectedLabelStyle，//未选中时的字体样式，设置了并无生效
    bool showSelectedLabels，//是否为未选择的BottomNavigationBarItem显示标签
    bool showUnselectedLabels,//是否为选定的BottomNavigationBarItem显示标签
}）

BottomNavigationBarItem({
    @required Widget icon,//设置icon图标
    Widget title,//设置标签控件
    Widget activeIcon,//选中的时候的标签控件
    Color backgroundColor,//BottomNavigationBarType为shifting时的背景颜色
  })
  
复制代码

2、经常使用属性

1.设置导航栏的子item控件，放入导航栏的控件item列表长度items必须至少为2，每一个项目的图标和标题不得为空app

items: <BottomNavigationBarItem>[
              //放入导航栏的控件item列表长度items必须至少为2，每一个项目的图标和标题不得为空
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.ac_unit,
//                    color: Colors.black,
                    size: 20,
                  ), //设置使用什么图标控件
                  title: Text('热门'), //设置使用什么文本控件
//                  activeIcon: getTabIcon(0), //选中时要显示的图标控件
                  backgroundColor:
                      Colors.red), //BottomNavigationBarType为shifting时的背景颜色
              BottomNavigationBarItem(
                  icon: getTabIcon(1), //设置使用什么图标控件
                  title: getTabTitle(1), //设置使用什么文本控件
                  activeIcon: getTabIcon(1), //选中时要显示的图标控件
                  backgroundColor: Colors.blue),
              BottomNavigationBarItem(
                  icon: getTabIcon(2), //设置使用什么图标控件
                  title: getTabTitle(2), //设置使用什么文本控件
                  activeIcon: getTabIcon(2), //选中时要显示的图标控件
                  backgroundColor: Colors.green)
            ],
复制代码

2.导航栏子item点击的回调ide

onTap: (index) {
              //点击导航栏子item的时候的
              setState(() {
                _tabIndex = index;
              });
            },
复制代码

3.底部导航栏的类型，有fixed和shifting两个类型，不一样类型显示效果不同字体

type: BottomNavigationBarType.fixed, //底部导航栏的类型，有fixed和shifting两个类型，不一样类型显示效果不同
复制代码

4.选中的时候的字体颜色，不能跟selectedItemColor 一块儿用ui

fixedColor: Colors.black, //选中的时候的字体颜色，不能跟selectedItemColor 一块儿用
复制代码

5.设置icon大小this

iconSize: 200.0, // icon的大小
复制代码

6.当前活动BottomNavigationBarItem的项目索引。spa

currentIndex: _tabIndex
复制代码

7.选中的tab的字体的大小code

selectedFontSize: 30, //选中的tab的字体的大小
复制代码

8.导航栏背景颜色orm

backgroundColor: Colors.lightBlueAccent, //导航栏背景颜色
复制代码

9.选中时的子Item的样式，这个不能跟BottomNavigationBarItem Icon 的colors 一块儿用，不然会以Icon 的colors为准，主题设置的不会生效，而且icon必须为官方的icon为主，不然也没法生效cdn

selectedIconTheme: IconThemeData(
              //选中时的子Item的样式，这个不能跟BottomNavigationBarItem Icon 的colors 一块儿用，不然会以Icon 的colors为准，主题设置的不会生效，而且icon必须为官方的icon为主，不然也没法生效
              color: Colors.yellow,
              opacity: 0.7,
            ),
复制代码

10.选中的时候的字体颜色，不能跟fixedColor 一块儿用

selectedItemColor: Colors.yellow, //选中的时候的字体颜色，不能跟fixedColor 一块儿用
复制代码

11.选中的时候的字体样式，设置了并无生效

selectedLabelStyle: TextStyle(
                color: Colors.yellow, fontSize: 20), //选中的时候的字体样式，设置了并无生效        
复制代码

12.是否为未选择的BottomNavigationBarItem显示标签,设置了没有看出什么效果

showUnselectedLabels:
                true, //是否为未选择的BottomNavigationBarItem显示标签,设置了没有看出什么效果
复制代码

13.未选中BottomNavigationBarItem标签 的字体大小

unselectedFontSize: 25, //未选中BottomNavigationBarItem标签 的字体大小
复制代码

14.未选中时的BottomNavigationBarItem.icon s中图标的大小，不透明度和颜色

unselectedIconTheme: IconThemeData(
              //未选中时的BottomNavigationBarItem.icon s中图标的大小，不透明度和颜色
              color: Colors.pink,
              opacity: 0.7,
            ),
复制代码

15.当前为选中的BottomNavigationBarItem.labels 的颜色

unselectedItemColor:Colors.pink, //当前为选中的BottomNavigationBarItem.labels 的颜色
复制代码

16.未选中时的字体样式，设置了并无生效

unselectedLabelStyle: TextStyle( color: Colors.green, fontSize: 15), //未选中时的字体样式，设置了并无生效
复制代码

17.选中的时候的字体样式，设置了并无生效

showSelectedLabels: true, //选中的时候的字体样式，设置了并无生效
复制代码

3、总结

1.一个基础的底部导航栏控件，selectedIconTheme，selectedLabelStyle，selectedFontSize，showUnselectedLabels 与unselect相关的属性的设置的前提是 BottomNavigationBarItem，里面没有去设置相关的颜色、属性、样式等，不然会以BottomNavigationBarItem里面的属性设置为主，特别注意selectedIconTheme，unselectedIconTheme相关必需要用flutter的Icon 控件进行设置，本身提供的图片是没法设置这些属性的。

2.通常状况下选中跟未选中的时候，字体跟对应的图标都要统一切换为某一种颜色，这里能够用selectedIconTheme，unselectedIconTheme相关的属性，但这个仅限于用系统的图标，也可使用BottomNavigationBarItem里面设置图标、字体的方式，如果本身的图标建议使用这种方式；

/*
     * 初始化选中和未选中的icon
     */
    tabImages = [
      [
        getTabImage('images/tab_ic_home.png'),
        getTabImage('images/tab_ic_home_sel.png')
      ],
      [
        getTabImage('images/tab_ic_follow.png'),
        getTabImage('images/tab_ic_follow_sel.png')
      ],
      [
        getTabImage('images/tab_ic_profile.png'),
        getTabImage('images/tab_ic_profile_sel.png')
      ]
    ];
    
  /*
   * 根据选择得到对应的normal或是press的icon
   */
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }
  
    /*
   * 获取bottomTab的颜色和文字
   */
  Text getTabTitle(int curIndex) {
    if (curIndex == _tabIndex) {
      return Text(appBarTitles[curIndex],
          style: TextStyle(fontSize: 11.0, color: const Color(0xFFFE5823)));
    } else {
      return Text(appBarTitles[curIndex],
          style: TextStyle(fontSize: 11.0, color: const Color(0xFF999999)));
    }
  }

  /*
   * 根据image路径获取图片
   */
  Image getTabImage(path) {
    return Image.asset(path, width: 23.0, height: 23.0);
  }
  
  
复制代码

4、一个完整的例子

import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'BottomNavigationBar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavigationBarPage(),
    ));

// This app is a stateful, it tracks the user's current choice.

class BottomNavigationBarPage extends StatefulWidget {
  BottomNavigationBarPage({Key key, this.uid}) : super(key: key);
  final int uid;

  @override
  _BottomNavigationBarPageState createState() =>
      _BottomNavigationBarPageState();
}

class _BottomNavigationBarPageState extends State<BottomNavigationBarPage> with SingleTickerProviderStateMixin {
  int _tabIndex = 0;
  var tabImages;
  var appBarTitles = ['首页', '发现', '个人'];
  /* * 存放三个页面，跟fragmentList同样 */
  var _pageList;

  /* * 根据选择得到对应的normal或是press的icon */
  Image getTabIcon(int curIndex) {
    if (curIndex == _tabIndex) {
      return tabImages[curIndex][1];
    }
    return tabImages[curIndex][0];
  }

  /* * 获取bottomTab的颜色和文字 */
  Text getTabTitle(int curIndex) {
    if (curIndex == _tabIndex) {
      return Text(appBarTitles[curIndex],
          style: TextStyle(fontSize: 11.0, color: const Color(0xFFFE5823)));
    } else {
      return Text(appBarTitles[curIndex],
          style: TextStyle(fontSize: 11.0, color: const Color(0xFF999999)));
    }
  }

  /* * 根据image路径获取图片 */
  Image getTabImage(path) {
    return Image.asset(path, width: 23.0, height: 23.0);
  }

  void initData() {
    /* * 初始化选中和未选中的icon */
    tabImages = [
      [
        getTabImage('images/tab_ic_home.png'),
        getTabImage('images/tab_ic_home_sel.png')
      ],
      [
        getTabImage('images/tab_ic_follow.png'),
        getTabImage('images/tab_ic_follow_sel.png')
      ],
      [
        getTabImage('images/tab_ic_profile.png'),
        getTabImage('images/tab_ic_profile_sel.png')
      ]
    ];
    /* * 三个子界面 */
    _pageList = [
      Center(
        child: Text('第一页'),
      ),
      Center(
        child: Text('第二页'),
      ),
      Center(
        child: Text('第三页'),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    //初始化数据
    initData();
    return Scaffold(
        body: _pageList[_tabIndex],
        bottomNavigationBar: Container(
          child: BottomNavigationBar(
            items: <BottomNavigationBarItem>[
              //放入导航栏的控件item列表长度items必须至少为2，每一个项目的图标和标题不得为空
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.ac_unit,
// color: Colors.black,
                    size: 20,
                  ), //设置使用什么图标控件
                  title: Text('热门'), //设置使用什么文本控件
// activeIcon: getTabIcon(0), //选中时要显示的图标控件
                  backgroundColor:
                      Colors.red), //BottomNavigationBarType为shifting时的背景颜色
              BottomNavigationBarItem(
                  icon: getTabIcon(1), //设置使用什么图标控件
                  title: Text('控件'), //设置使用什么文本控件
// activeIcon: getTabIcon(1), //选中时要显示的图标控件
                  backgroundColor: Colors.blue),
              BottomNavigationBarItem(
                  icon: getTabIcon(2), //设置使用什么图标控件
                  title: getTabTitle(2), //设置使用什么文本控件
                  activeIcon: getTabIcon(2), //选中时要显示的图标控件
                  backgroundColor: Colors.green)
            ],
            onTap: (index) {
              //点击导航栏子item的时候的
              setState(() {
                _tabIndex = index;
              });
            },
            elevation: 150, //设置z 轴坐标，设置了并无什么效果
            type: BottomNavigationBarType
                .fixed, //底部导航栏的类型，有fixed和shifting两个类型，不一样类型显示效果不同
            fixedColor: Colors.black, //选中的时候的字体颜色，不能跟selectedItemColor 一块儿用
            iconSize: 200.0, // icon的大小
            currentIndex: _tabIndex, //当前活动BottomNavigationBarItem的项目 索引。
            selectedFontSize: 30, //选中的tab的字体的大小
// backgroundColor: Colors.lightBlueAccent, //导航栏背景颜色
            selectedIconTheme: IconThemeData(
              //选中时的子Item的样式，这个不能跟BottomNavigationBarItem Icon 的colors 一块儿用，不然会以Icon 的colors为准，主题设置的不会生效，而且icon必须为官方的icon为主，不然也没法生效
              color: Colors.yellow,
              opacity: 0.7,
            ),
// selectedItemColor: Colors.yellow, //选中的时候的字体颜色，不能跟fixedColor 一块儿用
            selectedLabelStyle: TextStyle(
                color: Colors.yellow, fontSize: 20), //选中的时候的字体样式，设置了并无生效
            showUnselectedLabels:
                true, //是否为未选择的BottomNavigationBarItem显示标签,设置了没有看出什么效果
            unselectedFontSize: 25, //未选中BottomNavigationBarItem标签 的字体大小
            unselectedIconTheme: IconThemeData(
              //未选中时的BottomNavigationBarItem.icon s中图标的大小，不透明度和颜色
              color: Colors.pink,
              opacity: 0.7,
            ),
            unselectedItemColor:
                Colors.pink, //当前为选中的BottomNavigationBarItem.labels 的颜色
            unselectedLabelStyle: TextStyle(
                color: Colors.green, fontSize: 15), //未选中时的字体样式，设置了并无生效
            showSelectedLabels: true, //选中的时候的字体样式，设置了并无生效
          ),
        ));
  }
}



复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程