如何在 Jetpack Compose Column 中指定子项之间的确切间距？

Question

我正在尝试在 Jetpack Compose 中创建一个列，每个子元素之间具有特定的间距，例如 10.dp。在 SwiftUI 中，这相对简单。我只想创建一个VStack具有spacing价值的：

struct ContentView: View {
    let strings = ["Hello", "World", "Apples"]

    var body: some View {
        VStack(spacing: 10) {
            ForEach(strings, id: \.self) { string in
                Text(string).background(Color.green)
            }
        }
        .background(Color.blue)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这是 SwiftUI 预览版中的样子：

在 Jetpack Compose 中，我的代码是：

@Composable
fun ContentView() {
    val strings = listOf<String>("Hello", "World", "Apples")

    MaterialTheme {
        Surface(color = MaterialTheme.colors.background) {
            Column(
                modifier = Modifier
                    .background(Color.Blue)
                    // I would expect to be able to add something like ".spacer(10.dp)" here
            ) {
                strings.forEach { string ->
                    Text(
                        modifier = Modifier.background(Color.Green),
                        text = string
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ContentView()
}

由于此代码缺少任何间距，因此它是当前的样子：

我的标准是：

• Column 的子元素之间应存在特定高度（例如 10.dp）的空间。
• 空间应该不会在出现之前第一要素。
• 空间应该不是后出现最后一个元素。

我会使用一个Spacer元素，但我不相信这会起作用，因为在 for 循环中，我相信我最终Spacer会在第一个元素之前或最后一个元素之后有一个，这是我不想要的。

Answer 1

用 Arrangement.spacedBy

Column(
    modifier = Modifier
        .background(Color.Blue),
    verticalArrangement = Arrangement.spacedBy(10.dp)
) {
    // content here
}