Android Jetpack Compose FlowRow如何设置垂直行间距？

要给FlowRow的行与行之间添加垂直间距，最直接的方式是利用FlowRow自身的配置参数，以下是两种实用实现方案：

方法1：利用FlowRow的verticalArrangement参数（推荐） #

FlowRow（无论是Compose Foundation内置版本还是新版Accompanist组件）都支持通过verticalArrangement配置行间距，只需将其设置为Arrangement.spacedBy(xx.dp)即可，同时保留你原本的水平间距配置：

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(5.dp),
    // 添加垂直行间距，此处设为10dp，可按需调整数值
    verticalArrangement = Arrangement.spacedBy(10.dp),
    modifier = Modifier
        .fillMaxWidth()
        .padding(bottom = 10.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    // 修正原代码笔误：将`essence -`改为`essence ->`
    WoodEssences.values.forEach { essence ->
        Box(
            modifier = Modifier
                .border(
                    1.dp,
                    Color.Gray,
                    RoundedCornerShape(5.dp)
                )
                .padding(5.dp)
                .width(boxWidth)
        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text(
                    text = essence.letter_id,
                    style = MaterialTheme.typography.bodyMedium,
                    fontSize = 18.sp
                )
                Checkbox(
                    checked = essenceCheckbox[essence.num_id]!!,
                    onCheckedChange = {
                        essenceCheckbox[essence.num_id] = it
                    },
                    colors = CheckboxDefaults
                        .colors(checkedColor = editIconColor)
                )
            }
        }
        // 原代码的Spacer可移除，因为horizontalArrangement已处理水平间距，避免重复叠加
        // Spacer(modifier = Modifier.width(5.dp))
    }
}

说明：

• verticalArrangement = Arrangement.spacedBy(10.dp)会自动在各行之间插入垂直间距，无需手动给子项添加padding
• 移除手动添加的Spacer，避免与horizontalArrangement的水平间距重复，导致间距过大

方法2：给子项添加底部padding（兼容旧版FlowRow） #

如果使用的是无verticalArrangement参数的旧版FlowRow，可以给每个子项添加底部padding，同时通过条件判断去掉最后一个子项的padding，避免最后一行下方多出无效间距：

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(5.dp),
    modifier = Modifier
        .fillMaxWidth()
        .padding(bottom = 10.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    val essencesList = WoodEssences.values
    essencesList.forEachIndexed { index, essence ->
        Box(
            modifier = Modifier
                .border(
                    1.dp,
                    Color.Gray,
                    RoundedCornerShape(5.dp)
                )
                .padding(5.dp)
                .width(boxWidth)
                // 仅给非最后一个子项添加底部padding
                .then(
                    if (index != essencesList.lastIndex) Modifier.padding(bottom = 10.dp)
                    else Modifier
                )
        ) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text(
                    text = essence.letter_id,
                    style = MaterialTheme.typography.bodyMedium,
                    fontSize = 18.sp
                )
                Checkbox(
                    checked = essenceCheckbox[essence.num_id]!!,
                    onCheckedChange = { essenceCheckbox[essence.num_id] = it },
                    colors = CheckboxDefaults.colors(checkedColor = editIconColor)
                )
            }
        }
    }
}

注意事项 #

• 优先使用方法1，代码更简洁且无需额外处理边界情况
• 若使用Accompanist的FlowRow，需确保依赖版本在0.28.0及以上，以支持verticalArrangement参数

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