移除 Stack 中嵌入的 HStack 之间的间距

Question

我试图堆叠两个充满圆圈的 HStacks，但是，无论我做什么，我都无法摆脱两者之间的间距。

 VStack {
            VStack(spacing: 0) {
                HStack {
                    ForEach(viewModel.lights) { light in
                        Circle()
                            .foregroundColor(light.color)
                    }
                }
                HStack {
                    ForEach(viewModel.lights) { light in
                        Circle()
                            .foregroundColor(light.color)
                    }
                }
            } .padding()
            
            Button(action: viewModel.start ) {
                Text("Start")
            }
}

Answer 1

由于 Circle 没有高度限制，它们占据了所有可用的垂直 space，即使可见形状没有占据 space。在水平方向上，它们受到 device/screen.

宽度的限制

您可以添加 .aspectRatio(contentMode: .fit) 以将它们在垂直方向上限制为仅 space 它们需要占用的区域：

Circle()
   .aspectRatio(contentMode: .fit)
   .foregroundColor(light.color)

完成后，如果您还想将它们推到屏幕顶部，可以在 HStack 下方添加一个 Spacer。

移除 Stack 中嵌入的 HStack 之间的间距

Remove spacing between HStacks embedded in Stack

swift

swiftui

vstack

hstack