文章目錄

• 一、BottomNavigationBar 底部導(dǎo)航欄
• 二、PageView 滑動頁面
• 三、BottomNavigationBar 與 PageView 關(guān)聯(lián)
• 四、完整代碼示例
• • 1、核心導(dǎo)航組件
  • 2、四個切換頁面
  • 3、應(yīng)用啟動主界面
  • 4、運行效果
• 五、相關(guān)資源

一、BottomNavigationBar 底部導(dǎo)航欄

---

在 Scaffold 的 bottomNavigationBar 屬性設(shè)置底部導(dǎo)航欄 ;

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

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

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

代碼示例 :

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

二、PageView 滑動頁面

---

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

控制器 : 在 PageView 的 controller 參數(shù)設(shè)置 , PageController 類型 , 主要用于控制 PageView 的頁面跳轉(zhuǎn) ;

滑動回調(diào)事件 : onPageChanged 參數(shù)設(shè)置滑動回調(diào)事件 , 傳入 index 索引值 , 在該事件中 , 調(diào)用 setState 方法 , 更新底部導(dǎo)航欄 BottomNavigationBar 的當(dāng)前索引值 , 并更新 UI 界面 ;

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

代碼示例 :

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

三、BottomNavigationBar 與 PageView 關(guān)聯(lián)

---

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

BottomNavigationBar 主動設(shè)置選中狀態(tài) : 在 BottomNavigationBar 的 onTap 參數(shù)中 , 可以獲取點擊的按鈕索引 , 然后調(diào)用 PageView 的 PageController 的 jumpToPage 方法 實現(xiàn)相應(yīng)的界面跳轉(zhuǎn) ;

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

PageView 被動設(shè)置選中狀態(tài) : 在 BottomNavigationBar 底部導(dǎo)航欄中點擊導(dǎo)航按鈕 , 切換頁面 , 使用 PageView 的 PageController 的 jumpToPage 方法進行頁面跳轉(zhuǎn) ;

PageView 主動設(shè)置選中狀態(tài) : 滑動 PageView 界面 , 會回調(diào) PageView 中的 onPageChanged 方法 , 在此處調(diào)用 setState 方法 , 在該方法中設(shè)置 _currentIndex 的值 , 進而更新 BottomNavigationBar 底部導(dǎo)航欄的選中狀態(tài) ;

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

四、完整代碼示例

---

1、核心導(dǎo)航組件

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

2、四個切換頁面

頁面 1 :

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

頁面 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';/// 個人設(shè)置界面 class SettingPage extends StatefulWidget {@override_SettingPageState createState() => _SettingPageState(); }class _SettingPageState extends State<SettingPage> {@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中組件body: Center(child: Text("個人設(shè)置頁面"),),);} }

3、應(yīng)用啟動主界面

import 'package:flutter/material.dart'; import 'package:flutter_app/navigator/main_navigator.dart';/// 應(yīng)用主頁面 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、運行效果

五、相關(guān)資源

---

參考資料 :

• Flutter 官網(wǎng) : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區(qū) : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
• Flutter 中文網(wǎng) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰(zhàn)電子書 : https://book.flutterchina.club/chapter1/

重要的專題 :

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

博客源碼下載 :

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。