如何在ZStack SwiftUI中移除填充

Question

当我在ZStack中放置另一个VStack时，出现了奇怪的填充。如何去除它？

struct ContentView: View {
var body: some View {
    VStack{
        VStack{
            Text("1")
        }
        .frame(width: 200, height: 50)
        .background(Color.init(.green))

        ZStack{
            VStack{
                Text("2")
            }
            .frame(width: 210, height: 50)
            .background(Color.init(.blue))
            VStack{
                Text("3")
            }
            .frame(width: 200, height: 50)
            .background(Color.init(.green))
        }

        VStack{
            Text("4")
        }
        .frame(width: 200, height: 50)
        .background(Color.init(.green))
    }    
}

如果我注释掉VStack中的Text("2")，则padding将消失。

- Роман

Answer 1

这是它

var body: some View {
    VStack(spacing: 0) { // << here !!

- Asperi

---

我相信问题是关于“ZStack”而不是“VStack”的。 - avatarZuko

@avatarZuko，主题发起者的问题是如何去除奇怪的填充 - 原因不在于 ZStack... 在这种情况下，如何表述并不重要 - 这是提供的代码的修复方法。 - Asperi

Answer 2

你在提供不同的宽度

VStack{
      Text("2")
}
.frame(width: 210, height: 50)
.background(Color.init(.blue))

宽度为210，其它元素的宽度为200，提供相同的宽度将会去除填充。

- Sumeet Mourya

---

不，它不会被移除。我在谈论的是1和3之间/3和4之间的垂直填充。 - Роман

这是由于顶部 VStack 视图的原因。 在此 VStack 中提供间距以避免出现空白/边距/填充。 - Sumeet Mourya