问题描述
我遇到了一个奇怪的事情,我覆盖了两个不同的视图。这两个视图包含一个 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))
⋮
}