SwiftUI - 偏移量是错误的

如何解决SwiftUI - 偏移量是错误的

我遇到了一个奇怪的事情，我覆盖了两个不同的视图。这两个视图包含一个 ForEach 循环，它在其中创建一个 Rectangle 元素。此矩形的偏移量由 ForEach 循环的索引 * 设置的高度变量 30 确定。其中一个视图的矩形具有 1 的高度，而另一个视图的矩形具有此高度变量的高度。这应该创建一个带边框的矩形。但不是，这两种观点不匹配？

我不知道为什么会发生这种情况。当然，如果我想要一个带边框的矩形，我可以这样做，但这不是我的重点。我真的很好奇为什么会发生这种情况。代码如下。

第一次观看：

import SwiftUI

struct test: View {
    var body: some View {
        vstack(spacing: 0) {
            ForEach(0 ..< 10) { i in
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 1)
                    .offset(y: CGFloat(height*i))
            }
            Spacer()
        }
    }
}

struct test_Previews: PreviewProvider {
    static var previews: some View {
        test()
    }
}

第二次观看：

import SwiftUI

struct test2: View {
    var body: some View {
        vstack(spacing: 0) {
            ForEach(0 ..< 5) { i in
                Rectangle()
                    .fill(Color.red)
                    .frame(height: CGFloat(height))
                    .offset(y: CGFloat(height*i))
            }
            Spacer()
        }
    }
}

struct test2_Previews: PreviewProvider {
    static var previews: some View {
        test2()
    }
}

内容视图：

import SwiftUI

public var height = 30

struct ContentView: View {
    var body: some View {
        test2()
            .overlay(test())
                
    }
}

结果：

解决方法

在测试中使用它：

.offset(y: CGFloat((height*i)-i))

,

说 test 和 test2 都从 y = 0 开始。

• 您的第一个绿色矩形位于 y=0 和 y=1 之间，偏移 30

• 第二个绿色矩形位于 y=31 和 y=32 之间

• y=62 和 y=63 之间的第三个

  ⋮

---

• 您的第一个红色矩形位于 y=0 和 y=30 之间，偏移 30

• 第二个红色矩形位于 y=60 和 y=90 之间

  ⋮

---

现在你看到问题了，那就不匹配了。

要解决它，您可以更改 test 中的偏移量：

struct test : View {
     ⋮
    Rectangle()
        .offset(y: CGFloat((height - 1) * i))
     ⋮
}