欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JetPack Compose底部導(dǎo)航欄的實(shí)現(xiàn)方法詳解

 更新時(shí)間:2022年09月06日 15:11:51   作者:兒歌八萬(wàn)首  
開(kāi)發(fā)一個(gè)新項(xiàng)目,底部導(dǎo)航欄一般是首頁(yè)的標(biāo)配,在以前的xml布局中,我們可以很輕松的是用谷歌提供的BottomNavigationView或者自定義來(lái)實(shí)現(xiàn)底部導(dǎo)航的功能,在Compose中也有也提供了一個(gè)類(lèi)似的控件androidx.compose.material.BottomNavigation

1.聲明導(dǎo)航欄數(shù)據(jù)源

主要聲明導(dǎo)航欄label和圖標(biāo)數(shù)組,這里使用的是本地?cái)?shù)據(jù),也可以使用網(wǎng)絡(luò)數(shù)據(jù)。

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

2.使用Scaffold搭建頁(yè)面結(jié)構(gòu)

Compose給我們提供了Scaffold腳手架,實(shí)現(xiàn)了Material設(shè)計(jì)的頁(yè)面基本結(jié)構(gòu)。包括標(biāo)題欄、底部欄、SnackBar(類(lèi)似吐司功能)、浮動(dòng)按鈕、抽屜組件、剩余內(nèi)容布局等,讓我們可以快速定義一個(gè)基本的頁(yè)面結(jié)構(gòu)。

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

3.BottomNavigation的用法

BottomNavigation中的content可以添加多個(gè)BottomNavigationItem,用來(lái)構(gòu)建導(dǎo)航欄的樣式,BottomNavigationItem中可以設(shè)置iconlabel,選中顏色和未選中顏色等等一些常用的屬性??梢越oitem設(shè)置點(diǎn)擊事件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)
        })
    }
}

這里用了一個(gè)循環(huán)來(lái)添加BottomNavigationItem,通過(guò)selectIndex來(lái)判斷tab是否選中。在點(diǎn)擊事件中設(shè)置選中的索引。 這里要注意的是在Compose中導(dǎo)航主要是用NavHostController來(lái)進(jìn)行控制。 需要引入單獨(dú)的依賴庫(kù)

通常這個(gè)實(shí)例是用rememberNavController()來(lái)獲取。

val navController = rememberNavController()

可以通過(guò)navigate方法來(lái)進(jìn)行導(dǎo)航到具體也面,naviget傳人的參數(shù)和NavHost中的startDestination參數(shù)一致,這樣就可以跳轉(zhuǎn)到指定頁(yè)面中

navController.navigate(labels[i])

到此這篇關(guān)于JetPack Compose底部導(dǎo)航欄的實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)JetPack Compose底部導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論