我們在上一章回中介紹了Jetpack中彈出菜單相關(guān)的內(nèi)容，本章回中將介紹 底部導(dǎo)航欄。閑話休提，讓我們一起Talk Android Jetpack吧！

1. 概念介紹

我們在本章回中介紹的底部導(dǎo)航欄就是位于屏幕最下方的內(nèi)容，它通常包含多個(gè)圖標(biāo)，點(diǎn)擊圖標(biāo)后可以跳轉(zhuǎn)到不同頁面，因此叫作底部導(dǎo)航欄。

Jetpack提供了兩個(gè)可組合函數(shù)來實(shí)現(xiàn)底部導(dǎo)航欄，它們是NavigationBar和NavigationBarItem。本章回中將詳細(xì)它們的使用的方法。

2. 使用方法

2.1 NavigationBar

該可組合函數(shù)主要用來當(dāng)作容器，它可包含導(dǎo)航欄中的內(nèi)容，主要是NavigationBarItem。它提供了相關(guān)的參數(shù)來設(shè)置導(dǎo)航欄，詳細(xì)如下：

• containerColor參數(shù):主要用來設(shè)置導(dǎo)航欄的背景顏色；
• contentColor參數(shù):主要用來設(shè)置導(dǎo)航欄中內(nèi)容的顏色；
• tonalElevation參數(shù):主要用來設(shè)置陰影的效果；

我在實(shí)踐中發(fā)現(xiàn)第二個(gè)參數(shù)沒有效果，第三個(gè)參數(shù)的效果不是很明顯，因此該函數(shù)可操控的內(nèi)容比較少。

2.2 NavigationBarItem

• icon參數(shù):主要用來控制導(dǎo)航欄中的圖標(biāo)；
• label參數(shù):主要用來控制導(dǎo)航欄中的文本；
• selected參數(shù):主要用來控制當(dāng)前內(nèi)容是否被選中；
• onClick參數(shù):主要用來響點(diǎn)擊事件，和Button中同名參數(shù)的用法相同；
• colors參數(shù):主要用來控制Icon和label的顏色，包含選擇和未選擇時(shí)的顏色；

3. 示例代碼

3.1 代碼和注釋

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomBottomNavigationBar() {//定義一個(gè)狀態(tài)值在選擇bar時(shí)使用var selectedItem by remember { mutableStateOf(0) }val items = listOf<NavigationItem>(NavigationItem("Person",Icons.Default.Person),NavigationItem("Home",Icons.Default.Home),NavigationItem("Setting",Icons.Default.Settings),)NavigationBar(containerColor = Color.Blue,contentColor = Color.Green, //這個(gè)顏色不起作用) {items.forEachIndexed { index, item ->NavigationBarItem(//通過狀態(tài)值和索引值來判斷當(dāng)前bar是否被選中selected = selectedItem == index,onClick = { selectedItem = index },//設(shè)置bar上的圖標(biāo)icon = {              Icon(imageVector = item.icon, contentDescription = null )},//設(shè)置bar的各種顏色colors = NavigationBarItemDefaults.colors(selectedIconColor = Color.Cyan,selectedTextColor = Color.Cyan,//這個(gè)顏色最好和NavigationBar的containerColor顏色保持一致，不然會(huì)在Icon外層顯示一個(gè)背景顏色indicatorColor = Color.Blue,unselectedIconColor = Color.Yellow,unselectedTextColor = Color.Yellow,),//設(shè)置bar上的文字label = { Text(text = item.text) })}}
}

3.2 代碼難點(diǎn)

上面的示例代碼中有一個(gè)難點(diǎn)：點(diǎn)擊不同的圖標(biāo)時(shí)自動(dòng)切換圖標(biāo)。具體點(diǎn)說就是點(diǎn)擊導(dǎo)航欄中的某個(gè)圖標(biāo)時(shí)被點(diǎn)擊圖標(biāo)處于選中狀態(tài)，其它沒有點(diǎn)擊的圖標(biāo)處于未選中狀態(tài)。

實(shí)現(xiàn)這個(gè)功能需要定義一個(gè)狀態(tài)值并且使用remember進(jìn)行狀態(tài)管理，然后判斷狀態(tài)值是否是當(dāng)前選擇的圖標(biāo)，如果是就把NavigationBarItem函數(shù)的selected參數(shù)賦值為true,反之賦值為false.這樣就實(shí)現(xiàn)了該功能。我們這么說可能比較抽象，大家可以參考示例代碼，代碼中有詳細(xì)的注釋。

3.3 運(yùn)行效果

我們把底部導(dǎo)航欄所有的代碼封裝成了一個(gè)可組合函數(shù)，這樣方便管理代碼。下面是程序的運(yùn)行效果圖。我建議大家自己動(dòng)手去實(shí)踐，特別是切換圖標(biāo)的功能。

4. 內(nèi)容總結(jié)

最后，我們對本章回的內(nèi)容做一個(gè)總結(jié)：

• 底部導(dǎo)航欄位于屏幕最下方，主要用來通過圖標(biāo)切換不同的頁面；
• 底部導(dǎo)航欄通過NavigationBar和NavigationBarItem可組合函數(shù)實(shí)現(xiàn)；
• 底部導(dǎo)航欄的圖標(biāo)、文字以及它們的顏色都是通過可組合函數(shù)的參數(shù)來修改；
• 底部導(dǎo)航欄點(diǎn)擊圖標(biāo)時(shí)切換圖標(biāo)的功能需要通過狀態(tài)管理和可組合函數(shù)的參數(shù)一起實(shí)現(xiàn)；

看官們，關(guān)于Jetpack中底部導(dǎo)航欄相關(guān)的內(nèi)容就介紹到這里，歡迎大家在評論區(qū)交流與討論！