如何在Jetpack Compose中实现如图所示的视图？

核心组件拆解 #

• 顶部横向滚动标签栏：用LazyRow实现可滚动标签组，支持选中状态高亮
• 下方卡片列表：用LazyVerticalGrid实现多列布局，通过Card组件配置圆角、阴影效果

完整代码示例 #

@Composable
fun TargetScreen() {
    Column(modifier = Modifier.fillMaxSize()) {
        // 顶部横向滚动标签栏
        LazyRow(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(16.dp),
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
        ) {
            val tags = listOf("全部", "推荐", "热门", "最新", "关注")
            items(tags) { tag ->
                TagItem(
                    text = tag,
                    isSelected = tag == "推荐" // 模拟选中状态，可根据业务逻辑修改
                )
            }
        }

        // 下方卡片列表
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp),
            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
        ) {
            items(10) { index ->
                Card(
                    modifier = Modifier.fillMaxWidth(),
                    shape = RoundedCornerShape(12.dp),
                    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
                ) {
                    Column {
                        // 卡片顶部图片区域（可替换为Coil等图片加载库）
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(120.dp)
                                .background(Color.Gray.copy(alpha = 0.3f))
                        ) {
                            Text(
                                text = "图片占位",
                                modifier = Modifier.align(Alignment.Center),
                                color = Color.Gray
                            )
                        }
                        // 卡片底部文字
                        Text(
                            text = "卡片标题 $index",
                            modifier = Modifier.padding(12.dp),
                            fontSize = 14.sp,
                            fontWeight = FontWeight.Medium
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun TagItem(text: String, isSelected: Boolean) {
    val bgColor = if (isSelected) Color.Blue else Color.LightGray.copy(alpha = 0.5f)
    val textColor = if (isSelected) Color.White else Color.Black
    Box(
        modifier = Modifier
            .background(bgColor, RoundedCornerShape(20.dp))
            .padding(horizontal = 16.dp, vertical = 8.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = text,
            color = textColor,
            fontSize = 14.sp,
            fontWeight = FontWeight.Medium
        )
    }
}

细节调整说明 #

• 标签栏：可修改spacing、padding参数，以及选中状态的配色，匹配Figma标注
• 卡片：调整RoundedCornerShape的圆角值、elevation阴影高度，图片区域高度可根据设计稿修改
• 列表布局：如需单列显示，将GridCells.Fixed(2)改为GridCells.Fixed(1)即可

内容的提问来源于stack exchange，提问作者Yuba