Flutter BottomNavigationBar 控件介绍

2019/7/25 10:04:11 人评论 次浏览 分类:Flutter                 进angular qq群大神亲自指导     angular交流群②

一、控件介绍

一个底部导航栏控件,用于进行不同视图的切换,底部导航栏可以由文本、图标 或者两者结合的形式组成,底部导航栏统筹与Scaffold结合使用,它通常作为Scaffold.bottomNavigationBar参数提供。

二、使用方法

  1. BottomNavigationBar({

  2. Key key

  3. @ required List < BottomNavigationBarItem > items//放入导航栏的控件item列表长度items必须至少为2,每个项目的图标和标题不得为空,

  4. ValueChanged < int > onTap//点击导航栏子item的时候的

  5. int currentIndex0//当前活动BottomNavigationBarItem的项目 索引。

  6. double elevation8.0//设置z 轴坐标,设置了并没有什么效果

  7. BottomNavigationBarType type//底部导航栏的类型,有fixed和shifting两个类型,不同类型显示效果不一样

  8. Color fixedColor//选中的时候的字体颜色,不能跟selectedItemColor 一起用

  9. Color backgroundColor//导航栏背景颜色

  10. double iconSize24.0// icon的大小 ,设置了并木有效果

  11. Color selectedItemColor//选中的时候的字体颜色,不能跟fixedColor 一起用

  12. Color unselectedItemColor//未选中BottomNavigationBarItem标签 的字体大小

  13. IconThemeData selectedIconTheme const IconThemeData(),//选中时的子Item的样式,这个不能跟BottomNavigationBarItem Icon 的colors 一起用,否则会以Icon 的colors为准,主题设置的不会生效,并且icon必须为官方的icon为主,否则也无法生效

  14. IconThemeData unselectedIconTheme const IconThemeData(), //未选中时的BottomNavigationBarItem.icon s中图标的大小,不透明度和颜色

  15. double selectedFontSize 14.0//选中的tab的字体的大小

  16. double unselectedFontSize 12.0//未选中BottomNavigationBarItem标签 的字体大小

  17. TextStyle selectedLabelStyle//选中的时候的字体样式,设置了并没有生效

  18. TextStyle unselectedLabelStyle//未选中时的字体样式,设置了并没有生效

  19. bool showSelectedLabels//是否为未选择的BottomNavigationBarItem显示标签

  20. bool showUnselectedLabels,//是否为选定的BottomNavigationBarItem显示标签

  21. })

  22. BottomNavigationBarItem({

  23. @required Widget icon,//设置icon图标

  24. Widget title,//设置标签控件

  25. Widget activeIcon,//选中的时候的标签控件

  26. Color backgroundColor,//BottomNavigationBarType为shifting时的背景颜色

  27. })

二、常用属性

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

  1. items: <BottomNavigationBarItem>[

  2. //放入导航栏的控件item列表长度items必须至少为2,每个项目的图标和标题不得为空

  3. BottomNavigationBarItem(

  4. icon: Icon(

  5. Icons.ac_unit,

  6. // color: Colors.black,

  7. size: 20,

  8. ), //设置使用什么图标控件

  9. title: Text('热门'), //设置使用什么文本控件

  10. // activeIcon: getTabIcon(0), //选中时要显示的图标控件

  11. backgroundColor:

  12. Colors.red), //BottomNavigationBarType为shifting时的背景颜色

  13. BottomNavigationBarItem(

  14. icon: getTabIcon(1), //设置使用什么图标控件

  15. title: getTabTitle(1), //设置使用什么文本控件

  16. activeIcon: getTabIcon(1), //选中时要显示的图标控件

  17. backgroundColor: Colors.blue),

  18. BottomNavigationBarItem(

  19. icon: getTabIcon(2), //设置使用什么图标控件

  20. title: getTabTitle(2), //设置使用什么文本控件

  21. activeIcon: getTabIcon(2), //选中时要显示的图标控件

  22. backgroundColor: Colors.green)

  23. ],

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

  1. onTap: (index) {

  2. //点击导航栏子item的时候的

  3. setState(() {

  4. _tabIndex = index;

  5. });

  6. },

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

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

4.选中的时候的字体颜色,不能跟selectedItemColor 一起用

  1. fixedColor: Colors.black, //选中的时候的字体颜色,不能跟selectedItemColor 一起用

5.设置icon大小

  1. iconSize: 200.0, // icon的大小

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

  1. currentIndex: _tabIndex

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

  1. selectedFontSize: 30, //选中的tab的字体的大小

8.导航栏背景颜色

  1. backgroundColor: Colors.lightBlueAccent, //导航栏背景颜色

9.选中时的子Item的样式,这个不能跟BottomNavigationBarItem Icon 的colors 一起用,否则会以Icon 的colors为准,主题设置的不会生效,并且icon必须为官方的icon为主,否则也无法生效

  1. selectedIconTheme: IconThemeData(

  2. //选中时的子Item的样式,这个不能跟BottomNavigationBarItem Icon 的colors 一起用,否则会以Icon 的colors为准,主题设置的不会生效,并且icon必须为官方的icon为主,否则也无法生效

  3. color: Colors.yellow,

  4. opacity: 0.7,

  5. ),

10.选中的时候的字体颜色,不能跟fixedColor 一起用

  1. selectedItemColor: Colors.yellow, //选中的时候的字体颜色,不能跟fixedColor 一起用

11.选中的时候的字体样式,设置了并没有生效

  1. selectedLabelStyle: TextStyle(

  2. color: Colors.yellow, fontSize: 20), //选中的时候的字体样式,设置了并没有生效

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

  1. showUnselectedLabels:

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

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

  1. unselectedFontSize: 25, //未选中BottomNavigationBarItem标签 的字体大小

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

  1. unselectedIconTheme: IconThemeData(

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

  3. color: Colors.pink,

  4. opacity: 0.7,

  5. ),

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

  1. unselectedItemColor:Colors.pink, //当前为选中的BottomNavigationBarItem.labels 的颜色

16.未选中时的字体样式,设置了并没有生效

  1. unselectedLabelStyle: TextStyle( color: Colors.green, fontSize: 15), //未选中时的字体样式,设置了并没有生效

17.选中的时候的字体样式,设置了并没有生效

  1. showSelectedLabels: true, //选中的时候的字体样式,设置了并没有生效

三、总结

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

2.一般情况下选中跟未选中的时候,字体跟对应的图标都要统一切换为某一种颜色,这里可以用selectedIconTheme,unselectedIconTheme相关的属性,但这个仅限于用系统的图标,也可以使用BottomNavigationBarItem里面设置图标、字体的方式,若是自己的图标建议使用这种方式;

  1. /*

  2. * 初始化选中和未选中的icon

  3. */

  4. tabImages = [

  5. [

  6. getTabImage('images/tab_ic_home.png'),

  7. getTabImage('images/tab_ic_home_sel.png')

  8. ],

  9. [

  10. getTabImage('images/tab_ic_follow.png'),

  11. getTabImage('images/tab_ic_follow_sel.png')

  12. ],

  13. [

  14. getTabImage('images/tab_ic_profile.png'),

  15. getTabImage('images/tab_ic_profile_sel.png')

  16. ]

  17. ];

  18. /*

  19. * 根据选择获得对应的normal或是press的icon

  20. */

  21. Image getTabIcon(int curIndex) {

  22. if (curIndex == _tabIndex) {

  23. return tabImages[curIndex][1];

  24. }

  25. return tabImages[curIndex][0];

  26. }

  27. /*

  28. * 获取bottomTab的颜色和文字

  29. */

  30. Text getTabTitle(int curIndex) {

  31. if (curIndex == _tabIndex) {

  32. return Text(appBarTitles[curIndex],

  33. style: TextStyle(fontSize: 11.0, color: const Color(0xFFFE5823)));

  34. } else {

  35. return Text(appBarTitles[curIndex],

  36. style: TextStyle(fontSize: 11.0, color: const Color(0xFF999999)));

  37. }

  38. }

  39. /*

  40. * 根据image路径获取图片

  41. */

  42. Image getTabImage(path) {

  43. return Image.asset(path, width: 23.0, height: 23.0);

  44. }

四、一个完整的例子

  1. import 'dart:ui';

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

  3. void main() => runApp(MaterialApp(

  4. title: 'BottomNavigationBar',

  5. theme: ThemeData(

  6. primarySwatch: Colors.blue,

  7. ),

  8. home: BottomNavigationBarPage(),

  9. ));

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

  11. class BottomNavigationBarPage extends StatefulWidget {

  12. BottomNavigationBarPage({Key key, this.uid}) : super(key: key);

  13. final int uid;

  14. @override

  15. _BottomNavigationBarPageState createState() =>

  16. _BottomNavigationBarPageState();

  17. }

  18. class _BottomNavigationBarPageState extends State<BottomNavigationBarPage>

  19. with SingleTickerProviderStateMixin {

  20. int _tabIndex = 0;

  21. var tabImages;

  22. var appBarTitles = ['首页', '发现', '我的'];

  23. /*

  24. * 存放三个页面,跟fragmentList一样

  25. */

  26. var _pageList;

  27. /*

  28. * 根据选择获得对应的normal或是press的icon

  29. */

  30. Image getTabIcon(int curIndex) {

  31. if (curIndex == _tabIndex) {

  32. return tabImages[curIndex][1];

  33. }

  34. return tabImages[curIndex][0];

  35. }

  36. /*

  37. * 获取bottomTab的颜色和文字

  38. */

  39. Text getTabTitle(int curIndex) {

  40. if (curIndex == _tabIndex) {

  41. return Text(appBarTitles[curIndex],

  42. style: TextStyle(fontSize: 11.0, color: const Color(0xFFFE5823)));

  43. } else {

  44. return Text(appBarTitles[curIndex],

  45. style: TextStyle(fontSize: 11.0, color: const Color(0xFF999999)));

  46. }

  47. }

  48. /*

  49. * 根据image路径获取图片

  50. */

  51. Image getTabImage(path) {

  52. return Image.asset(path, width: 23.0, height: 23.0);

  53. }

  54. void initData() {

  55. /*

  56. * 初始化选中和未选中的icon

  57. */

  58. tabImages = [

  59. [

  60. getTabImage('images/tab_ic_home.png'),

  61. getTabImage('images/tab_ic_home_sel.png')

  62. ],

  63. [

  64. getTabImage('images/tab_ic_follow.png'),

  65. getTabImage('images/tab_ic_follow_sel.png')

  66. ],

  67. [

  68. getTabImage('images/tab_ic_profile.png'),

  69. getTabImage('images/tab_ic_profile_sel.png')

  70. ]

  71. ];

  72. /*

  73. * 三个子界面

  74. */

  75. _pageList = [

  76. Center(

  77. child: Text('第一页'),

  78. ),

  79. Center(

  80. child: Text('第二页'),

  81. ),

  82. Center(

  83. child: Text('第三页'),

  84. ),

  85. ];

  86. }

  87. @override

  88. Widget build(BuildContext context) {

  89. //初始化数据

  90. initData();

  91. return Scaffold(

  92. body: _pageList[_tabIndex],

  93. bottomNavigationBar: Container(

  94. child: BottomNavigationBar(

  95. items: <BottomNavigationBarItem>[

  96. //放入导航栏的控件item列表长度items必须至少为2,每个项目的图标和标题不得为空

  97. BottomNavigationBarItem(

  98. icon: Icon(

  99. Icons.ac_unit,

  100. // color: Colors.black,

  101. size: 20,

  102. ), //设置使用什么图标控件

  103. title: Text('热门'), //设置使用什么文本控件

  104. // activeIcon: getTabIcon(0), //选中时要显示的图标控件

  105. backgroundColor:

  106. Colors.red), //BottomNavigationBarType为shifting时的背景颜色

  107. BottomNavigationBarItem(

  108. icon: getTabIcon(1), //设置使用什么图标控件

  109. title: Text('控件'), //设置使用什么文本控件

  110. // activeIcon: getTabIcon(1), //选中时要显示的图标控件

  111. backgroundColor: Colors.blue),

  112. BottomNavigationBarItem(

  113. icon: getTabIcon(2), //设置使用什么图标控件

  114. title: getTabTitle(2), //设置使用什么文本控件

  115. activeIcon: getTabIcon(2), //选中时要显示的图标控件

  116. backgroundColor: Colors.green)

  117. ],

  118. onTap: (index) {

  119. //点击导航栏子item的时候的

  120. setState(() {

  121. _tabIndex = index;

  122. });

  123. },

  124. elevation: 150, //设置z 轴坐标,设置了并没有什么效果

  125. type: BottomNavigationBarType

  126. .fixed, //底部导航栏的类型,有fixed和shifting两个类型,不同类型显示效果不一样

  127. fixedColor: Colors.black, //选中的时候的字体颜色,不能跟selectedItemColor 一起用

  128. iconSize: 200.0, // icon的大小

  129. currentIndex: _tabIndex, //当前活动BottomNavigationBarItem的项目 索引。

  130. selectedFontSize: 30, //选中的tab的字体的大小

  131. // backgroundColor: Colors.lightBlueAccent, //导航栏背景颜色

  132. selectedIconTheme: IconThemeData(

  133. //选中时的子Item的样式,这个不能跟BottomNavigationBarItem Icon 的colors 一起用,否则会以Icon 的colors为准,主题设置的不会生效,并且icon必须为官方的icon为主,否则也无法生效

  134. color: Colors.yellow,

  135. opacity: 0.7,

  136. ),

  137. // selectedItemColor: Colors.yellow, //选中的时候的字体颜色,不能跟fixedColor 一起用

  138. selectedLabelStyle: TextStyle(

  139. color: Colors.yellow, fontSize: 20), //选中的时候的字体样式,设置了并没有生效

  140. showUnselectedLabels:

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

  142. unselectedFontSize: 25, //未选中BottomNavigationBarItem标签 的字体大小

  143. unselectedIconTheme: IconThemeData(

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

  145. color: Colors.pink,

  146. opacity: 0.7,

  147. ),

  148. unselectedItemColor:

  149. Colors.pink, //当前为选中的BottomNavigationBarItem.labels 的颜色

  150. unselectedLabelStyle: TextStyle(

  151. color: Colors.green, fontSize: 15), //未选中时的字体样式,设置了并没有生效

  152. showSelectedLabels: true, //选中的时候的字体样式,设置了并没有生效

  153. ),

  154. ));

  155. }

  156. }

本文链接 http://www.ngui.cc/news/show-14955.html

教程有问题或不明白可以在评论区评论站长会用心修改的

相关资讯

    暂无相关的资讯...