文章目錄

• 一、BottomNavigationBar 組件
• 二、BottomNavigationBarItem 組件
• 三、BottomNavigationBar 底部導航欄代碼示例
• 四、BottomNavigationBar 底部導航欄選中狀態切換代碼示例
• 五、BottomNavigationBar 底部導航欄切換選項卡界面
• 六、 相關資源

一、BottomNavigationBar 組件

---

BottomNavigationBar 組件是底部導航欄 , 用于設置給 Scaffold 組件的 bottomNavigationBar 字段 ;

下面是 BottomNavigationBar 組件的構造函數源碼 , 該構造函數的可選參數列表就是可以設置的字段屬性 ;

class BottomNavigationBar extends StatefulWidget {/// Creates a bottom navigation bar which is typically used as a/// [Scaffold]'s [Scaffold.bottomNavigationBar] argument.////// The length of [items] must be at least two and each item's icon and title/// must not be null.////// If [type] is null then [BottomNavigationBarType.fixed] is used when there/// are two or three [items], [BottomNavigationBarType.shifting] otherwise.////// The [iconSize], [selectedFontSize], [unselectedFontSize], and [elevation]/// arguments must be non-null and non-negative.////// If [selectedLabelStyle.color] and [unselectedLabelStyle.color] values/// are non-null, they will be used instead of [selectedItemColor] and/// [unselectedItemColor].////// If custom [IconThemData]s are used, you must provide both/// [selectedIconTheme] and [unselectedIconTheme], and both/// [IconThemeData.color] and [IconThemeData.size] must be set.////// If both [selectedLabelStyle.fontSize] and [selectedFontSize] are set,/// [selectedLabelStyle.fontSize] will be used.////// Only one of [selectedItemColor] and [fixedColor] can be specified. The/// former is preferred, [fixedColor] only exists for the sake of/// backwards compatibility.////// The [showSelectedLabels] argument must not be non-null.////// The [showUnselectedLabels] argument defaults to `true` if [type] is/// [BottomNavigationBarType.fixed] and `false` if [type] is/// [BottomNavigationBarType.shifting].BottomNavigationBar({Key key,@required this.items,// 當前的若干 BottomNavigationBarItem 組件this.onTap,this.currentIndex = 0,// 當前選中條目 this.elevation = 8.0,BottomNavigationBarType type,Color fixedColor,this.backgroundColor,this.iconSize = 24.0,Color selectedItemColor,this.unselectedItemColor,this.selectedIconTheme = const IconThemeData(),this.unselectedIconTheme = const IconThemeData(),this.selectedFontSize = 14.0,this.unselectedFontSize = 12.0,this.selectedLabelStyle,this.unselectedLabelStyle,this.showSelectedLabels = true,bool showUnselectedLabels,}) }

二、BottomNavigationBarItem 組件

---

BottomNavigationBarItem 組件是 BottomNavigationBar 的 items 字段值 , 可以給該 items 字段設置多個 BottomNavigationBarItem 組件 ;

BottomNavigationBarItem 組件常用設置 :

• 默認狀態圖標 : icon ;
• 圖標下顯示的標題 : title ;
• 激活狀態的圖標 : activeIcon ;
• 背景顏色 : backgroundColor ;

BottomNavigationBarItem 組件構造函數源碼 :

class BottomNavigationBarItem {/// Creates an item that is used with [BottomNavigationBar.items].////// The argument [icon] should not be null and the argument [title] should not be null when used in a Material Design's [BottomNavigationBar].const BottomNavigationBarItem({@required this.icon, // 默認狀態圖標this.title, // 圖標下顯示的標題Widget activeIcon, // 激活狀態的圖標 this.backgroundColor, // 背景顏色}) : activeIcon = activeIcon ?? icon,assert(icon != null); }

三、BottomNavigationBar 底部導航欄代碼示例

---

代碼示例 :

// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(items: [// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.home, color: Colors.red,),// 設置標題title: Text("主頁")),// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.settings, color: Colors.red,),// 設置標題title: Text("設置"))],),

完整代碼示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設置給 Text 文本組件// 設置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標題欄appBar: AppBar(title: Text('StatefulWidgetPage 組件示例'),),// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(items: [// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.home, color: Colors.red,),// 設置標題title: Text("主頁")),// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.settings, color: Colors.red,),// 設置標題title: Text("設置"))],),// Container 容器使用body: Container(// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[],),),),);} }

運行效果 :

四、BottomNavigationBar 底部導航欄選中狀態切換代碼示例

---

BottomNavigationBar 底部導航欄每個 BottomNavigationBarItem 都有一個選中狀態 , 通過 StatefulWidget 可以改變頁面狀態 ;

設置一個成員變量 , 標識當前選中的索引值 ;

/// 當前被選中的底部導航欄索引int _currentSelectedIndex = 0;

將 BottomNavigationBar 組件的 currentIndex 設置為 _currentSelectedIndex 成員變量 ;

// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設置當前選中的底部導航索引currentIndex: _currentSelectedIndex,)

設置 BottomNavigationBar 組件的 onTap 回調事件 , 傳入一個匿名回調函數 , 在該匿名方法中回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引 , 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡 ;

// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設置當前選中的底部導航索引currentIndex: _currentSelectedIndex,// 設置點擊底部導航欄的回調事件 , index 參數是點擊的索引值onTap: (index){// 回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引// 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡setState(() {// 改變 int _currentSelectedIndex 變量的狀態_currentSelectedIndex = index;});},)

完整代碼示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 當前被選中的底部導航欄索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設置給 Text 文本組件// 設置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標題欄appBar: AppBar(title: Text('StatefulWidgetPage 組件示例'),),// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設置當前選中的底部導航索引currentIndex: _currentSelectedIndex,// 設置點擊底部導航欄的回調事件 , index 參數是點擊的索引值onTap: (index){// 回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引// 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡setState(() {// 改變 int _currentSelectedIndex 變量的狀態_currentSelectedIndex = index;});},// 條目items: [// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.home, color: Colors.red,),// 設置標題title: Text("主頁")),// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.settings, color: Colors.red,),// 設置標題title: Text("設置"))],),// Container 容器使用body: Container(// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[],),),),);} }

運行效果 :

五、BottomNavigationBar 底部導航欄切換選項卡界面

---

BottomNavigationBar 底部導航欄的 onTap 回調方法中 , 設置當前選中的選項卡索引 , 根據該索引值修改 Scaffold 組件的 body 對應組件 , 如果選項卡索引為 0 , 顯示組件 0 , 如果選項卡索引為 1 , 那么顯示組件 1 ;

設置 body 字段值時 , 根據當前的被中選的選項卡索引值 , 判斷應該顯示哪個組件 ;

body: _currentSelectedIndex == 0 ? 組件0 : 組件1 ,

組件 0 :

Container( // 對應底部導航欄主界面選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("主頁面選項卡")],),)

組件 1 :

Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("設置頁面選項卡")],),) , // 該設置與 _currentSelectedIndex == 0? 相對應, ?: 三目運算符

完整代碼 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 當前被選中的底部導航欄索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設置給 Text 文本組件// 設置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標題欄appBar: AppBar(title: Text('StatefulWidgetPage 組件示例'),),// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設置當前選中的底部導航索引currentIndex: _currentSelectedIndex,// 設置點擊底部導航欄的回調事件 , index 參數是點擊的索引值onTap: (index){// 回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引// 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡setState(() {// 改變 int _currentSelectedIndex 變量的狀態_currentSelectedIndex = index;});},// 條目items: [// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.home, color: Colors.red,),// 設置標題title: Text("主頁")),// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.settings, color: Colors.red,),// 設置標題title: Text("設置"))],),// Container 容器使用body:_currentSelectedIndex == 0 ?Container( // 對應底部導航欄主界面選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("主頁面選項卡")],),):Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("設置頁面選項卡")],),) , // 該設置與 _currentSelectedIndex == 0? 相對應, ?: 三目運算符),);} }

運行效果 :

六、 相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。