JetPack Compose 底部导航栏实现

开发一个app直播商城源码，底部导航栏一般是首页的标配，在以前的xml布局中，我们可以很轻松的是用谷歌提供的 BottomNavigationView或者自定义来实现底部导航的功能，在Compose中也有也提供了一个类似的控件 androidx.compose.material.BottomNavigation。

1.声明导航栏数据源

主要声明导航栏label和图标数组，这里app直播商城源码使用的是本地数据，也可以使用网络数据。

//导航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（类似吐司功能）、浮动按钮、抽屉组件、剩余内容布局等，让我们可以快速定义一个基本的app直播商城源码页面结构。

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，用来构建app直播商城源码的导航栏样式， 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来进行控制。 app直播商城源码需要引入单独的依赖库

implementation "androidx.navigation:navigation-compose:2.4.0-alpha09"

通常这个实例是用 rememberNavController()来获取。

val navController = rememberNavController()

可以通过 navigate方法来进行导航到具体页面， naviget传人的参数和 NavHost中的 startDestination参数一致，这样就可以跳转到指定页面中

navController.navigate(labels[i])

这样，我们就实现了一个app直播商城源码的底部导航栏。

声明：本文由云豹科技转发自儿歌八万首博客，如有侵权请联系作者删除

ITPub博客

实现app直播商城源码的系统底部导航栏

JetPack Compose 底部导航栏实现

最新文章