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