Flutter模仿實(shí)現(xiàn)微信底部導(dǎo)航欄流程詳解
前言
前面介紹了APP頂部導(dǎo)航欄AppBar,今天來介紹下Flutter實(shí)現(xiàn)APP底部導(dǎo)航欄。我們以仿寫微信的底部導(dǎo)航欄來舉例說明。
要實(shí)現(xiàn)類似微信底部的導(dǎo)航欄可以使用TabBar或者BottomNavigationBar來實(shí)現(xiàn)。下面分別介紹。
使用TabBar實(shí)現(xiàn)
TabBar介紹
在Flutter中,TabBar是一個(gè)用于創(chuàng)建選項(xiàng)卡式導(dǎo)航的常用組件。它通常與TabBarView一起使用,用于在不同的選項(xiàng)卡之間切換內(nèi)容。
TabBar的重要屬性
下面是TabBar的一些重要屬性和功能:
- tabs: tabs屬性是一個(gè)必需的屬性,用于指定選項(xiàng)卡的列表。您可以使用Tab小部件創(chuàng)建每個(gè)選項(xiàng)卡,并將它們放入tabs列表中。
- controller: controller屬性用于指定TabController,它負(fù)責(zé)管理選項(xiàng)卡和視圖之間的聯(lián)動(dòng)。您可以通過創(chuàng)建一個(gè)TabController實(shí)例,并將其作為controller屬性的值來實(shí)現(xiàn)聯(lián)動(dòng)。
- isScrollable: isScrollable屬性用于控制選項(xiàng)卡是否可滾動(dòng)。當(dāng)選項(xiàng)卡超出屏幕寬度時(shí),如果設(shè)置為true,則可以通過水平滾動(dòng)查看所有選項(xiàng)卡。
- indicatorColor: indicatorColor屬性用于設(shè)置選項(xiàng)卡下方的指示器的顏色。指示器是一個(gè)表示當(dāng)前選中選項(xiàng)卡的橫條。
- labelColor 和 unselectedLabelColor: labelColor屬性用于設(shè)置選中選項(xiàng)卡標(biāo)簽的顏色,而unselectedLabelColor屬性用于設(shè)置未選中選項(xiàng)卡標(biāo)簽的顏色。
- labelStyle 和 unselectedLabelStyle: labelStyle屬性用于設(shè)置選中選項(xiàng)卡標(biāo)簽的文本樣式,而unselectedLabelStyle屬性用于設(shè)置未選中選項(xiàng)卡標(biāo)簽的文本樣式。
- onTap: onTap屬性是一個(gè)回調(diào)函數(shù),當(dāng)用戶點(diǎn)擊選項(xiàng)卡時(shí)會(huì)觸發(fā)該函數(shù)。您可以在該回調(diào)函數(shù)中執(zhí)行特定的操作,例如更新視圖或處理其他邏輯。
說明
一般通過使用TabBar和TabBarView的組合,您可以輕松創(chuàng)建具有選項(xiàng)卡切換功能的界面。TabBar提供了可定制的選項(xiàng)卡導(dǎo)航欄,而TabBarView用于展示與選項(xiàng)卡對應(yīng)的內(nèi)容。這使得在Flutter應(yīng)用程序中實(shí)現(xiàn)選項(xiàng)卡式導(dǎo)航變得簡單而靈活。
TabBarView介紹
TabBarView是一個(gè)用于顯示與TabBar選項(xiàng)卡相對應(yīng)的內(nèi)容的組件。它與TabBar一起使用,以實(shí)現(xiàn)選項(xiàng)卡切換時(shí)內(nèi)容的同步更新。
TabBarView的重要屬性
下面是TabBarView的一些重要屬性和功能:
- children: children屬性是一個(gè)必需的屬性,用于指定與每個(gè)選項(xiàng)卡對應(yīng)的子組件列表。您可以將不同的小部件放入children列表中,以顯示不同的內(nèi)容。
- controller: controller屬性用于指定TabController,它負(fù)責(zé)管理選項(xiàng)卡和視圖之間的聯(lián)動(dòng)。確保將TabController實(shí)例作為TabBarView和TabBar的controller屬性值保持一致。
- physics: physics屬性用于指定滾動(dòng)行為。默認(rèn)情況下,TabBarView的滾動(dòng)行為與父級Scrollable組件一致。您可以根據(jù)需要設(shè)置不同的滾動(dòng)行為,如NeverScrollableScrollPhysics禁用滾動(dòng)或BouncingScrollPhysics添加彈性效果。
- dragStartBehavior: dragStartBehavior屬性控制滾動(dòng)開始行為。默認(rèn)情況下,它會(huì)根據(jù)環(huán)境決定是跟隨垂直方向還是水平方向進(jìn)行滾動(dòng)。您可以通過設(shè)置為DragStartBehavior.start或DragStartBehavior.down來強(qiáng)制啟動(dòng)垂直滾動(dòng)。
- physics和dragStartBehavior屬性的應(yīng)用示例:
Copy code TabBarView( controller: _tabController, physics: NeverScrollableScrollPhysics(), // 禁用滾動(dòng) dragStartBehavior: DragStartBehavior.down, // 垂直滾動(dòng) children: [ // 子組件列表 ... ], )
onPageChanged: onPageChanged屬性是一個(gè)回調(diào)函數(shù),當(dāng)用戶滑動(dòng)或切換選項(xiàng)卡時(shí),將觸發(fā)該函數(shù)。您可以在此回調(diào)函數(shù)中執(zhí)行任何與選項(xiàng)卡切換相關(guān)的操作。
TabBar總結(jié)
通過將TabBarView與TabBar和TabController結(jié)合使用,您可以實(shí)現(xiàn)選項(xiàng)卡之間內(nèi)容的同步切換。當(dāng)用戶切換選項(xiàng)卡時(shí),TabController將相應(yīng)地更新TabBarView中顯示的內(nèi)容,使用戶能夠輕松瀏覽不同的內(nèi)容。TabBarView為創(chuàng)建選項(xiàng)卡式導(dǎo)航提供了便捷的方式,并且可以根據(jù)實(shí)際需求進(jìn)行進(jìn)一步的定制和樣式設(shè)置。
TabBar實(shí)現(xiàn)底部導(dǎo)航的例子
源碼下載
鏈接: https://pan.baidu.com/s/1xsqMclJH8qXQHljKKxO-hQ?pwd=vg95
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyTabPage(), ); } } class MyTabPage extends StatefulWidget { @override _MyTabPageState createState() => _MyTabPageState(); } class _MyTabPageState extends State<MyTabPage> with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); // 3是選項(xiàng)卡數(shù)量 } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('微信'), ), body: TabBarView( controller: _tabController, children: [ // 第一個(gè)選項(xiàng)卡的內(nèi)容 Container( child: Center( child: Text('聊天'), ), ), // 第二個(gè)選項(xiàng)卡的內(nèi)容 Container( child: Center( child: Text('群組'), ), ), // 第三個(gè)選項(xiàng)卡的內(nèi)容 Container( child: Center( child: Text('個(gè)人'), ), ), ], ), bottomNavigationBar: TabBar( controller: _tabController, tabs: [ Tab(icon: Icon(Icons.chat), text: '聊天'), Tab(icon: Icon(Icons.group), text: '群組'), Tab(icon: Icon(Icons.person), text: '個(gè)人'), ], indicatorColor: Colors.blue, // 選中狀態(tài)下的指示器顏色 labelColor: Colors.blue, // 選中狀態(tài)下的文本顏色 unselectedLabelColor: Colors.grey, // 未選中狀態(tài)下的文本顏色 ), ); } }
效果圖如下:
備注:
記得用TabController將TabBarView與TabBar結(jié)合起來,這樣才能實(shí)現(xiàn)聯(lián)動(dòng),TabBar選擇時(shí)TabBarView才會(huì)刷新,TabBarView滑動(dòng)切換時(shí)TabBar的焦點(diǎn)才會(huì)跟著變。
BottomNavigationBar實(shí)現(xiàn)
BottomNavigationBar介紹
BottomNavigationBar是Flutter提供的用于底部導(dǎo)航欄的小部件,它可以在應(yīng)用程序的底部顯示一組導(dǎo)航選項(xiàng)。下面是對BottomNavigationBar的詳細(xì)介紹。
構(gòu)造函數(shù):
BottomNavigationBar({ Key? key, required List<BottomNavigationBarItem> items, // 導(dǎo)航選項(xiàng)列表 int currentIndex = 0, // 當(dāng)前選中的索引 Color? backgroundColor, // 背景顏色 Color? unselectedItemColor, // 未選中項(xiàng)的顏色 Color? selectedItemColor, // 選中項(xiàng)的顏色 double? elevation, // 陰影高度 BottomNavigationBarType type = BottomNavigationBarType.fixed, // 樣式類型 ValueChanged<int>? onTap, // 點(diǎn)擊事件回調(diào) MouseCursor? mouseCursor, // 鼠標(biāo)指針 bool enableFeedback = true, // 是否啟用觸覺反饋 })
屬性:
items:一個(gè)包含BottomNavigationBarItem對象的列表,表示導(dǎo)航欄的選項(xiàng)。每個(gè)BottomNavigationBarItem包含一個(gè)圖標(biāo)和一個(gè)可選的文本標(biāo)簽。
currentIndex:當(dāng)前選中的選項(xiàng)的索引。
backgroundColor:導(dǎo)航欄的背景顏色。
unselectedItemColor:未選中項(xiàng)的顏色。
selectedItemColor:選中項(xiàng)的顏色。
elevation:導(dǎo)航欄的陰影高度。
type:導(dǎo)航欄的樣式類型??梢允荁ottomNavigationBarType.fixed(固定樣式,所有選項(xiàng)占用相等的空間)或BottomNavigationBarType.shifting(移動(dòng)樣式,選中的選項(xiàng)會(huì)突出顯示)。
onTap:點(diǎn)擊導(dǎo)航項(xiàng)時(shí)的回調(diào)函數(shù),它接受一個(gè)int類型的參數(shù),表示選中的選項(xiàng)的索引。
mouseCursor:鼠標(biāo)指針的樣式。
enableFeedback:是否啟用觸覺反饋。
BottomNavigationBar實(shí)現(xiàn)底部導(dǎo)航欄的例子
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyTabPage(), ); } } class MyTabPage extends StatefulWidget { @override _MyTabPageState createState() => _MyTabPageState(); } class _MyTabPageState extends State<MyTabPage> with SingleTickerProviderStateMixin { int _currentIndex = 0; late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); // 3是選項(xiàng)卡數(shù)量 _tabController.addListener(_handleTabChange); // 添加監(jiān)聽器 } @override void dispose() { _tabController.removeListener(_handleTabChange); // 移除監(jiān)聽器 _tabController.dispose(); super.dispose(); } void _handleTabChange() { setState(() { _currentIndex = _tabController.index; // 更新焦點(diǎn)索引 }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('微信'), ), body: TabBarView( controller: _tabController, children: [ // 第一個(gè)選項(xiàng)卡的內(nèi)容 Container( child: Center( child: Text('聊天'), ), ), // 第二個(gè)選項(xiàng)卡的內(nèi)容 Container( child: Center( child: Text('群組'), ), ), // 第三個(gè)選項(xiàng)卡的內(nèi)容 Container( child: Center( child: Text('個(gè)人'), ), ), ], ), bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (int index) { setState(() { _currentIndex = index; _tabController.animateTo(index); // 切換TabBarView }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.chat), label: '聊天', ), BottomNavigationBarItem( icon: Icon(Icons.group), label: '群組', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: '個(gè)人', ), ], ), ); } }
效果如下:
我們使用了BottomNavigationBar小部件代替了TabBar。BottomNavigationBar可以放在屏幕底部,并且具有內(nèi)置的標(biāo)簽和圖標(biāo)。我們將currentIndex綁定到當(dāng)前選中的標(biāo)簽的索引,以便在用戶更改標(biāo)簽時(shí)更新底部導(dǎo)航欄。我們還使用onTap回調(diào),以便在用戶點(diǎn)擊標(biāo)簽時(shí)切換TabBarView中的標(biāo)簽頁。
請注意,在此示例中,我們?nèi)匀皇褂昧薚abBarView來顯示選項(xiàng)卡內(nèi)容。我們通過將TabController傳遞給TabBarView來將其與BottomNavigationBar同步。這樣,當(dāng)用戶更改底部導(dǎo)航欄的標(biāo)簽時(shí),TabBarView也會(huì)切換到相應(yīng)的標(biāo)簽頁。我們添加了一個(gè)_handleTabChange方法來處理選項(xiàng)卡的變化。在initState方法中,我們將此方法添加為TabController的監(jiān)聽器。當(dāng)TabController的索引發(fā)生變化時(shí),_handleTabChange方法會(huì)被調(diào)用,然后我們更新底部導(dǎo)航欄的焦點(diǎn)索引_currentIndex,從而實(shí)現(xiàn)底部導(dǎo)航欄焦點(diǎn)隨著TabBarView的滑動(dòng)而更新。
在_handleTabChange方法中,我們使用了setState來觸發(fā)重新構(gòu)建界面,以便更新底部導(dǎo)航欄焦點(diǎn)。
這些都是必要的,不然TabBarView和BottomNavigationBar不會(huì)聯(lián)動(dòng)。
總結(jié)
BottomNavigationBar和TabBar實(shí)現(xiàn)底部導(dǎo)航欄哪個(gè)更好?
BottomNavigationBar和TabBar都可以用作底部導(dǎo)航欄,選擇使用哪個(gè)取決于您的具體需求和設(shè)計(jì)偏好。以下是它們的一些特點(diǎn)和使用場景:
BottomNavigationBar
BottomNavigationBar是專門為底部導(dǎo)航欄設(shè)計(jì)的小部件,提供了內(nèi)置的標(biāo)簽和圖標(biāo),并支持固定數(shù)量的選項(xiàng)。
它通常用于在應(yīng)用的底部提供導(dǎo)航功能,例如常見的底部標(biāo)簽欄。
BottomNavigationBar在設(shè)計(jì)上更符合平臺(tái)的底部導(dǎo)航欄樣式,可以提供更統(tǒng)一的用戶體驗(yàn)。
它適合用于具有固定數(shù)量的導(dǎo)航選項(xiàng),例如底部標(biāo)簽頁的數(shù)量已知且固定。
TabBar
TabBar是一個(gè)通用的選項(xiàng)卡導(dǎo)航小部件,可以放置在頂部或底部,并且可以包含可滾動(dòng)或固定數(shù)量的選項(xiàng)。
它可以用于創(chuàng)建自定義的導(dǎo)航樣式,并支持更靈活的選項(xiàng)卡布局和交互。
TabBar適合用于具有可變數(shù)量的導(dǎo)航選項(xiàng),例如多個(gè)選項(xiàng)卡頁的數(shù)量可以根據(jù)用戶權(quán)限或動(dòng)態(tài)數(shù)據(jù)而變化。
根據(jù)實(shí)際情況選擇
在實(shí)際應(yīng)用中,選擇使用哪個(gè)小部件更方便、更好或更常用是因人而異的。如果您的應(yīng)用需要固定數(shù)量的底部導(dǎo)航選項(xiàng),并且您希望使用內(nèi)置的樣式和動(dòng)畫,那么BottomNavigationBar可能更適合。如果您需要更多的自定義選項(xiàng),例如可滾動(dòng)的選項(xiàng)卡或與其他自定義導(dǎo)航組件的集成,那么TabBar可能更適合。
最佳選擇取決于您的項(xiàng)目需求、設(shè)計(jì)風(fēng)格和用戶體驗(yàn)?zāi)繕?biāo)。建議根據(jù)具體情況評估這兩個(gè)小部件,并選擇最適合您項(xiàng)目的底部導(dǎo)航欄實(shí)現(xiàn)。
到此這篇關(guān)于Flutter模仿實(shí)現(xiàn)微信底部導(dǎo)航欄流程詳解的文章就介紹到這了,更多相關(guān)Flutter微信導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android 實(shí)現(xiàn)搶購倒計(jì)時(shí)功能的示例
這篇文章主要介紹了Android 實(shí)現(xiàn)搶購倒計(jì)時(shí)功能的示例,幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā),感興趣的朋友可以了解下2021-03-03Android 系統(tǒng)實(shí)現(xiàn)多種開機(jī)動(dòng)畫和logo切換功能
這篇文章主要介紹了android 系統(tǒng)實(shí)現(xiàn)多種開機(jī)動(dòng)畫和logo切換功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12Android ListView滾動(dòng)到指定的位置
這篇文章主要給大家介紹了Android中的ListView如何滾動(dòng)到指定的位置,文章給出了兩種解決的方法,并給出詳細(xì)的示例代碼,相信會(huì)對大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們下面來一起看看吧。2016-10-10android判斷phonegap是否聯(lián)網(wǎng)且加載super.loadUrl網(wǎng)址
android判斷phonegap是否聯(lián)網(wǎng)動(dòng)態(tài)加載super.loadUrl網(wǎng)址,接下來本文所提供的知識會(huì)幫助你解決以上問題,感興趣的你可不要錯(cuò)過了哈2013-02-02android中DatePicker和TimePicker的使用方法詳解
這篇文章主要介紹了android中DatePicker和TimePicker的使用方法,是Android中常用的功能,需要的朋友可以參考下2014-07-07Android Studio設(shè)置繪制布局時(shí)的視圖
這篇文章介紹了Android Studio設(shè)置繪制布局時(shí)視圖的方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11Android基于AudioManager、PhoneStateListener實(shí)現(xiàn)設(shè)置黑名單功能
這篇文章主要介紹了Android基于AudioManager、PhoneStateListener實(shí)現(xiàn)設(shè)置黑名單功能的方法,涉及Android操作手機(jī)通信錄及通話模式與手機(jī)狀態(tài)的相關(guān)技巧,需要的朋友可以參考下2016-01-01