Jetpack Compose实现固定数量卡片的非滚动Row布局

直接使用Compose的基础Row组件即可满足需求，无需LazyRow（它是为滚动场景设计的）。核心是通过配置Row的布局参数实现居中，并通过传入Composable集合来批量渲染卡片。

实现步骤与代码示例 #

1. 定义固定大小的卡片组件：先实现内容可自定义、尺寸固定的卡片：

@Composable
fun FixedSizeCard(color: Color) {
    Card(
        modifier = Modifier.size(80.dp), // 固定卡片宽高
        colors = CardDefaults.cardColors(containerColor = color),
        elevation = CardDefaults.cardElevation(4.dp)
    ) {
        // 这里可添加卡片内部内容，比如文本、图标等
    }
}

2. 封装居中对齐的Row容器：创建接收卡片集合的容器，配置全屏宽度与居中规则：

@Composable
fun CenteredCardRow(cards: List<@Composable () -> Unit>) {
    Row(
        modifier = Modifier.fillMaxWidth(), // 让Row填充全屏宽度
        horizontalArrangement = Arrangement.Center, // 卡片水平方向居中
        verticalAlignment = Alignment.CenterVertically, // 卡片垂直方向居中
        content = {
            cards.forEachIndexed { index, card ->
                card()
                // 为卡片之间添加间距，最后一张卡片不添加
                if (index != cards.lastIndex) {
                    Spacer(modifier = Modifier.width(12.dp))
                }
            }
        }
    )
}

3. 调用容器渲染卡片：将卡片数据转换为Composable集合，传入容器即可：

@Composable
fun DemoScreen() {
    // 准备卡片数据源，这里用不同颜色区分
    val cardData = listOf(Color.Red, Color.Green, Color.Blue, Color.Cyan)
    // 将数据映射为卡片Composable的集合
    val cardList = cardData.map { color ->
        { FixedSizeCard(color) }
    }
    // 渲染最终的卡片容器
    CenteredCardRow(cards = cardList)
}

关键说明 #

• 放弃LazyRow：它的核心是按需加载与滚动，完全不符合当前不可滚动、固定数量的需求，基础Row更适合。
• 布局参数控制：fillMaxWidth确保Row占满屏幕，horizontalArrangement和verticalAlignment直接控制卡片的居中位置。
• 避免溢出：需要提前确保卡片总宽度（单张宽度×数量 + 总间距）不超过屏幕宽度，若卡片数量过多会导致布局溢出，需提前控制数量。

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