日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

JetPack?Compose底部導航欄的實現方法詳解_Android

作者：兒歌八萬首 ? 更新時間： 2022-11-01 編程語言

1.聲明導航欄數據源

主要聲明導航欄label和圖標數組，這里使用的是本地數據，也可以使用網絡數據。

//導航label數組
private val labels = arrayOf("首頁", "房訊", "消息", "我的")
//導航默認圖標集合
private val defImages =
    arrayOf(R.mipmap.img_index, R.mipmap.img_info, R.mipmap.img_message, R.mipmap.img_preson)
//導航選中圖標集合
private var selectImages =
    arrayOf(
        R.mipmap.img_index_select,
        R.mipmap.img_info_select,
        R.mipmap.img_message_select,
        R.mipmap.img_preson_select
    )
//導航選中索引
private var selectIndex by mutableStateOf(0)

2.使用Scaffold搭建頁面結構

Compose給我們提供了Scaffold腳手架，實現了Material設計的頁面基本結構。包括標題欄、底部欄、SnackBar（類似吐司功能）、浮動按鈕、抽屜組件、剩余內容布局等，讓我們可以快速定義一個基本的頁面結構。

setContent {
    val navController = rememberNavController()
    Scaffold(
        //設置底部導航欄
        bottomBar = {
            BuildBottomBar(labels = labels, navController)
        },
    ) {
        //設置頁面主內容區域，這里通過NavHost，根據選中不同的導航欄Tab導航到不同的頁面。
        NavHost(navController = navController, startDestination = labels[selectIndex]) {
            composable(labels[0]) {
                //首頁Compose
                IndexPage()
            }
            composable(labels[1]) {
                //咨詢Compose
                InfoPage()
            }
            composable(labels[2]) {
                //消息Compose
                MessagePage()
            }
            composable(labels[3]) {
                //個人中心Compose
                PersonPage()
            }
        }
    }
}

3.BottomNavigation的用法

BottomNavigation中的content可以添加多個BottomNavigationItem，用來構建導航欄的樣式，BottomNavigationItem中可以設置icon和label，選中顏色和未選中顏色等等一些常用的屬性。可以給item設置點擊事件onClick等。

BottomNavigation(backgroundColor = Color.White, elevation = 6.dp) {
    for (i in labels.indices) {
        BottomNavigationItem(selected = selectIndex == i, onClick = {
            selectIndex = i
            navController.navigate(labels[i])
        }, icon = {
            Image(
                painter = painterResource(id = if (selectIndex == i) selectImages[i] else defImages[i]),
                contentDescription = labels[i],
                modifier = Modifier.size(25.dp)
            )
        }, label = {
            Text(text = labels[i], color = if (selectIndex == i) Color.Red else Color.Gray)
        })
    }
}

這里用了一個循環來添加BottomNavigationItem，通過selectIndex來判斷tab是否選中。在點擊事件中設置選中的索引。 這里要注意的是在Compose中導航主要是用NavHostController來進行控制。 需要引入單獨的依賴庫

通常這個實例是用rememberNavController()來獲取。

val navController = rememberNavController()

可以通過navigate方法來進行導航到具體也面，naviget傳人的參數和NavHost中的startDestination參數一致，這樣就可以跳轉到指定頁面中

navController.navigate(labels[i])

原文鏈接：https://blog.csdn.net/cj641809386/article/details/120704746

欄目分類
最近更新