文章目錄

• 一、BottomNavigationBar 底部導航欄
• 二、PageView 滑動頁面
• 三、BottomNavigationBar 與 PageView 關聯
• 四、完整代碼示例
• • 1、核心導航組件
  • 2、四個切換頁面
  • 3、應用啟動主界面
  • 4、運行效果
• 五、相關資源

一、BottomNavigationBar 底部導航欄

---

在 Scaffold 的 bottomNavigationBar 屬性設置底部導航欄 ;

設置當前索引 : BottomNavigationBar的 currentIndex 屬性設置當前底部導航欄的選中索引 , 為其設置一個變量 , 改變該變量值后 , 通過 setState 方法更新 UI 顯示 ;

設置點擊方法 : BottomNavigationBar 的 onTap 屬性設置點擊方法 , 傳入 index 索引 , 該索引值是被點擊的按鈕索引 , 在該方法中主要操作當前的 currentIndex 屬性變量 , 以及 PageView 頁面跳轉 ;

底部按鈕設置 : BottomNavigationBar 的 item 屬性設置若干 BottomNavigationBarItem 類型的點擊按鈕 ;

代碼示例 :

bottomNavigationBar: BottomNavigationBar(/// 當前選中的導航索引currentIndex: _currentIndex,/// 底部導航欄的點擊方法onTap: (index) {// 控制 PageView 跳轉到指定的頁面_pageController.jumpToPage(index);setState(() {// 更新當前的索引值_currentIndex = index;});},/// 設置底部的若干點擊導航欄點擊按鈕/// 注意該 List<BottomNavigationBarItem> items/// 中的按鈕順序 , 要與 PageView 中的頁面順序必須保持一致/// 個數個順序都要保持一致items: datas.map((data) {return BottomNavigationBarItem(/// 默認狀態下的圖標, 灰色icon: Icon(data.icon,color: Colors.grey,),/// 選中狀態下的圖標, 紅色activeIcon: Icon(data.icon,color: Colors.red,),/// 根據當前頁面是否選中 , 確定title: Text(data.title,style: TextStyle(/// 如果是選中狀態 , 則設置紅色/// 如果是非選中狀態, 則設置灰色color: _currentIndex == data.index ? Colors.red : Colors.grey),),);}).toList(),)

二、PageView 滑動頁面

---

PageView 作為顯示的主體組件 , 設置給 Scaffold 的 body 字段 , 主要設置以下三個參數 ;

控制器 : 在 PageView 的 controller 參數設置 , PageController 類型 , 主要用于控制 PageView 的頁面跳轉 ;

滑動回調事件 : onPageChanged 參數設置滑動回調事件 , 傳入 index 索引值 , 在該事件中 , 調用 setState 方法 , 更新底部導航欄 BottomNavigationBar 的當前索引值 , 并更新 UI 界面 ;

顯示組件 : 在 children 參數中設置 Widget 數組即可 , 組件類型只要是 Widget 就行 ;

代碼示例 :

/// 滑動組件 , 界面的核心元素 body: PageView(/// 控制跳轉翻頁的控制器controller: _pageController,/// 頁面滑動/// 這里設置 PageView 頁面滑動也能onPageChanged: (index) {setState(() {// 更新當前的索引值_currentIndex = index;});},/// Widget 組件數組 , 設置多個 Widget 組件/// 同一時間只顯示一個頁面組件children: [HomePage(), // 首頁ImagePage(), // 圖片頁SearchPage(), // 搜索頁SettingPage(), // 個人設置頁], ),

三、BottomNavigationBar 與 PageView 關聯

---

BottomNavigationBar 被動設備選中狀態 : BottomNavigationBar 的索引通過一個在組件內部定義的私有變量 _currentIndex 控制 , 將該 _currentIndex 變量設置給底部導航欄 BottomNavigationBar 的 currentIndex 參數 , 之后可以通過調用 setState 方法修改 _currentIndex 私有變量 , 即可控制 BottomNavigationBar 的選中狀態 ;

BottomNavigationBar 主動設置選中狀態 : 在 BottomNavigationBar 的 onTap 參數中 , 可以獲取點擊的按鈕索引 , 然后調用 PageView 的 PageController 的 jumpToPage 方法 實現相應的界面跳轉 ;

BottomNavigationBar(/// 當前選中的導航索引currentIndex: _currentIndex,/// 底部導航欄的點擊方法onTap: (index) {// 控制 PageView 跳轉到指定的頁面_pageController.jumpToPage(index);setState(() {// 更新當前的索引值_currentIndex = index;});}, }

PageView 被動設置選中狀態 : 在 BottomNavigationBar 底部導航欄中點擊導航按鈕 , 切換頁面 , 使用 PageView 的 PageController 的 jumpToPage 方法進行頁面跳轉 ;

PageView 主動設置選中狀態 : 滑動 PageView 界面 , 會回調 PageView 中的 onPageChanged 方法 , 在此處調用 setState 方法 , 在該方法中設置 _currentIndex 的值 , 進而更新 BottomNavigationBar 底部導航欄的選中狀態 ;

PageView(/// 控制跳轉翻頁的控制器controller: _pageController,/// 頁面滑動/// 這里設置 PageView 頁面滑動也能onPageChanged: (index) {setState(() {// 更新當前的索引值_currentIndex = index;});}, }

四、完整代碼示例

---

1、核心導航組件

import 'package:flutter/material.dart'; import 'package:flutter_app/pages/home_page.dart'; import 'package:flutter_app/pages/image_page.dart'; import 'package:flutter_app/pages/search_page.dart'; import 'package:flutter_app/pages/setting_page.dart';/// 應用的主界面組件 , 整個應用的初始根節點 class MainNavigatorWidget extends StatefulWidget {@override_MainNavigatorWidgetState createState() => _MainNavigatorWidgetState(); }/// 該類的父類 State 接受一個泛型 /// 泛型類型是 StatefulWidget 類型 TabNavigator class _MainNavigatorWidgetState extends State<MainNavigatorWidget>with SingleTickerProviderStateMixin {/// 當前的索引值int _currentIndex = 0;/// PageView 控制器 , 用于控制 PageViewvar _pageController = PageController(/// 初始索引值initialPage: 0,);@overridevoid dispose() {super.dispose();/// 銷毀 PageView 控制器_pageController.dispose();}@overrideWidget build(BuildContext context) {/// 根組件return Scaffold(/// 滑動組件 , 界面的核心元素body: PageView(/// 控制跳轉翻頁的控制器controller: _pageController,/// 頁面滑動/// 這里設置 PageView 頁面滑動也能onPageChanged: (index) {setState(() {// 更新當前的索引值_currentIndex = index;});},/// Widget 組件數組 , 設置多個 Widget 組件/// 同一時間只顯示一個頁面組件children: [HomePage(), // 首頁ImagePage(), // 圖片頁SearchPage(), // 搜索頁SettingPage(), // 個人設置頁],),/// 設置底部導航欄按鈕bottomNavigationBar: BottomNavigationBar(/// 當前選中的導航索引currentIndex: _currentIndex,/// 底部導航欄的點擊方法onTap: (index) {// 控制 PageView 跳轉到指定的頁面_pageController.jumpToPage(index);setState(() {// 更新當前的索引值_currentIndex = index;});},/// 設置底部的若干點擊導航欄點擊按鈕/// 注意該 List<BottomNavigationBarItem> items/// 中的按鈕順序 , 要與 PageView 中的頁面順序必須保持一致/// 個數個順序都要保持一致items: datas.map((data) {return BottomNavigationBarItem(/// 默認狀態下的圖標, 灰色icon: Icon(data.icon,color: Colors.grey,),/// 選中狀態下的圖標, 紅色activeIcon: Icon(data.icon,color: Colors.red,),/// 根據當前頁面是否選中 , 確定title: Text(data.title,style: TextStyle(/// 如果是選中狀態 , 則設置紅色/// 如果是非選中狀態, 則設置灰色color: _currentIndex == data.index ? Colors.red : Colors.grey),),);}).toList(),),);} }/// 封裝導航欄的圖標與文本數據 class TabData {/// 導航數據構造函數const TabData({this.index, this.title, this.icon});/// 導航標題final String title;/// 導航圖標final IconData icon;/// 索引final int index; }/// 導航欄數據集合 const List<TabData> datas = const <TabData>[const TabData(index: 0, title: '首頁', icon: Icons.home_outlined),const TabData(index: 1, title: '圖片', icon: Icons.camera),const TabData(index: 2, title: '搜索', icon: Icons.search),const TabData(index: 3, title: '設置', icon: Icons.settings), ];

2、四個切換頁面

頁面 1 :

import 'package:flutter/material.dart';/// 應用主界面 class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState(); }class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中組件body: Center(child: Text("應用主頁面"),),);} }

頁面 2 :

import 'package:flutter/material.dart';/// 圖片頁面 class ImagePage extends StatefulWidget {@override_ImagePageState createState() => _ImagePageState(); }class _ImagePageState extends State<ImagePage> {@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中組件body: Center(child: Text("圖片頁面"),),);} }

頁面 3 :

import 'package:flutter/material.dart';/// 搜索頁面 class SearchPage extends StatefulWidget {@override_SearchPageState createState() => _SearchPageState(); }class _SearchPageState extends State<SearchPage> {@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中組件body: Center(child: Text("搜索頁面"),),);} }

頁面 4 :

import 'package:flutter/material.dart';/// 個人設置界面 class SettingPage extends StatefulWidget {@override_SettingPageState createState() => _SettingPageState(); }class _SettingPageState extends State<SettingPage> {@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中組件body: Center(child: Text("個人設置頁面"),),);} }

3、應用啟動主界面

import 'package:flutter/material.dart'; import 'package:flutter_app/navigator/main_navigator.dart';/// 應用主頁面 void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MainNavigatorWidget(),);} }

4、運行效果

五、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• 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 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

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

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

總結

以上是生活随笔為你收集整理的【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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