Jetpack Compose FlowRow能否嵌套行？如何实现目标网格布局

FlowRow本身不支持直接实现你要的这种严格列对齐的嵌套行效果——单个FlowRow只会按元素宽度自动换行，没有列的概念，所以无法保证下一行元素和上一行严格对齐。要实现Phone、Calendar分别在Zoom、Messages正下方的效果，可以用以下两种方案：

方案一：嵌套FlowRow分行列布局 #

把每一行的元素单独放在一个FlowRow里，通过控制每个内部FlowRow的排列方式，让上下行元素对齐。示例代码：

Column(
    modifier = Modifier
        .fillMaxWidth()
        .verticalScroll(rememberScrollState())
) {
    // 第一行：Zoom + Messages
    FlowRow(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween // 按两端对齐，适配宽度
    ) {
        // Zoom 项
        Box(modifier = Modifier.size(120.dp, 60.dp).background(Color.LightGray)) {
            Text(text = "Zoom", modifier = Modifier.align(Alignment.Center))
        }
        // Messages 项
        Box(modifier = Modifier.size(150.dp, 60.dp).background(Color.LightGray)) {
            Text(text = "Messages", modifier = Modifier.align(Alignment.Center))
        }
    }
    Spacer(modifier = Modifier.height(8.dp)) // 行间距
    // 第二行：Phone + Calendar
    FlowRow(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        // Phone 项
        Box(modifier = Modifier.size(120.dp, 60.dp).background(Color.LightGray)) {
            Text(text = "Phone", modifier = Modifier.align(Alignment.Center))
        }
        // Calendar 项
        Box(modifier = Modifier.size(150.dp, 60.dp).background(Color.LightGray)) {
            Text(text = "Calendar", modifier = Modifier.align(Alignment.Center))
        }
    }
}

方案二：使用LazyVerticalGrid实现列对齐网格 #

如果需要更灵活的多列布局，推荐用LazyVerticalGrid，通过指定固定列数，自动让每列元素上下对齐：

LazyVerticalGrid(
    columns = GridCells.Fixed(2), // 固定2列
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp), // 列间距
    verticalArrangement = Arrangement.spacedBy(8.dp) // 行间距
) {
    item {
        Box(modifier = Modifier.size(120.dp, 60.dp).background(Color.LightGray)) {
            Text(text = "Zoom", modifier = Modifier.align(Alignment.Center))
        }
    }
    item {
        Box(modifier = Modifier.size(150.dp, 60.dp).background(Color.LightGray)) {
            Text(text = "Messages", modifier = Modifier.align(Alignment.Center))
        }
    }
    item {
        Box(modifier = Modifier.size(120.dp, 60.dp).background(Color.LightGray)) {
            Text(text = "Phone", modifier = Modifier.align(Alignment.Center))
        }
    }
    item {
        Box(modifier = Modifier.size(150.dp, 60.dp).background(Color.LightGray)) {
            Text(text = "Calendar", modifier = Modifier.align(Alignment.Center))
        }
    }
}

补充说明 #

如果坚持用单个FlowRow，无法实现你要的列对齐效果——因为FlowRow的换行是基于剩余空间判断，没有列的约束，下一行元素会从行首开始排列，不会和上一行元素的位置对应。

内容的提问来源于stack exchange，提问作者Nguyen Minh Binh