如何在JetpackComposeColumn中指定子项之间的确切间距?
我正在尝试在 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会在第一个元素之前或最后一个元素之后有一个,这是我不想要的。
回答
用 Arrangement.spacedBy
Column(
modifier = Modifier
.background(Color.Blue),
verticalArrangement = Arrangement.spacedBy(10.dp)
) {
// content here
}