Android compose wanandroid app之分类页面的实现

theyangchoi

已于 2022-04-29 15:18:08 修改

阅读量2.7k

点赞数 2

分类专栏： Android Compose 文章标签： android compose

于 2021-11-17 17:20:59 首次发布

本文链接：https://blog.youkuaiyun.com/theyangchoi/article/details/121381077

版权

本文介绍如何使用Jetpack Compose中的Scaffold、BottomNavigation和NavHost组件实现底部导航栏，并展示了如何构建分类页面，包括数据获取、左右布局设计等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现分类页面

- 前言

前言

之前实现了底部导航栏以及滑动切换，这里根据官方推荐的底部导航栏的使用方式重新实现了底部导航栏，并实现分类页面，通过API获取导航数据，实现左边菜单栏，右边内容显示的效果，效果图如下：
在这里插入图片描述

Scaffold简单使用

使用Scaffold可以实现Compose的基槽位布局，比如topBar顶部菜单栏，bottomBar底部导航栏，floatingActionButtonPosition悬浮按钮等等；这里就不做过多的介绍了，详情可以查阅Scaffold的属性进行设置，这里主要看bottomBar的实现。

先看一下bottomBar在Scaffold的表现形式：

bottomBar: @Composable () -> Unit = {
   },

从参数类型可以看出来，我们需要在里面放置一个被@Composable标记的函数，那么就先创建一个函数，并使用@Composable注解：

@Composable
fun BottomTab(){
   
	//实现逻辑
}

然后使用Scaffold，参数实现一个bottomBar就可以了：

Scaffold(
  bottomBar = {
   
       BottomTab()
     }) {
   
           //逻辑实现
     }
   }

接下来就是使用BottomNavigation和NavHost实现底部导航的操作了。

BottomNavigation和NavHost实现底部导航

官方推荐使用BottomNavigation实现导航栏，先来看一下BottomNavigation的属性，根据自己的需求设置即可：

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
)

在正式使用之前我们还需要设置一些变量，比如底部菜单的文字，选中和未选中的图片资源：

private val tabs = arrayOf("首页","项目","分类","我的")
private val defImg = arrayOf(R.drawable.home_unselected,R.drawable.project_unselected,R.drawable.classic_unselected,R.drawable.mine_unselected)
private val selectImg = arrayOf(R.drawable.home_selected,R.drawable.project_selected,R.drawable.classic_selected,R.drawable.mine_selected)

然后将BottomTab的方法补齐，如下：

@Composable
fun BottomTab(navController:NavController,viewModel: BottomTabBarViewModel,labels:Array<String>,selectImages:Array<Int>,defImages:Array<Int>){
   
        BottomNavigation(backgroundColor = Color.White, elevation = 6.dp,modifier = Modifier.navigationBarsPadding()//要设置这个属性，不然你会发现你的底部导航栏不见了
        ) {
   
            for (i in labels.indices) {
   
                BottomNavigationItem(selected = viewModel.bottomBarIndex == i, onClick = {
   
                    viewModel.bottomBarIndex = i
                    navController.navigate(labels[i])
                }, icon = {
   
                    Image(
                        painter = painterResource(id = if (viewModel.bottomBarIndex == i) selectImages[i] else defImages[i]),
                        contentDescription = labels[i],
                        modifier = Modifier.size(25.dp)
                    )
                }, label = {
   
                    Text(text = labels[i], color =

最低0.47元/天解锁文章