gpt4 book ai didi

swiftui - SwiftUI 中 ScrollView 中 VStack 元素中的神秘间距或填充

转载 作者:行者123 更新时间:2023-12-03 15:33:15 31 4
gpt4 key购买 nike

我不明白为什么 ForEach 中的元素之间有多余的垂直间距在 VStack 里面在 ScrollView 里面使用 GeometryReader 时渲染自定义水平分隔线。

        ScrollView {
ForEach(self.model1.elements, id: \.self) { element in
VStack.init(alignment: .leading, spacing: 0) {
// Text("test") // image 3: works correctly
// .background(Color.blue)
GeometryReader { geometry in
Path { path in
path.move(to: .init(x: 0, y: 0))
path.addLine(to: .init(x: geometry.size.width, y: 0))
}
.strokedPath(.init(lineWidth: 1, dash: [1,2]))
}
// .frame(maxHeight: 1) // image 2: uncommenting this line doesn't fix the spacing
.foregroundColor(.red)
.background(Color.blue)

HStack {
Text("\(element.index+1)")
.font(.system(.caption, design: .rounded))
.frame(width: 32, alignment: .trailing)
Text(element.element)
.font(.system(.caption, design: .monospaced))
.frame(maxWidth:nil)
Spacer()
}
.frame(maxWidth:nil)
.background(Color.green)
}
.border(Color.red)
}
}


上面的代码产生这个:
enter image description here

.frame(maxHeight: 1)蓝色填充消失了,但连续 HStack 之间仍有空白s。
enter image description here

我希望垂直间距与此图像中的一样,即 0。此图像是通过取消注释 Text("test") 来实现的。来源,并评论 GeometryReader代码。
enter image description here

我正在使用 Xcode 11.3.1 (11C504)

最佳答案

如果我理解你的最终目标,那就是让每一行都用虚线包围,它们之间没有填充,就像这样:

rows separated by red dotted lines

在这种情况下,IMO 您应该将线条放在背景中。例如:

ScrollView {
VStack(alignment: .leading) {
ForEach(self.elements, id: \.self) { element in
HStack {
Text("\(element.index+1)")
.font(.system(.caption, design: .rounded))
.frame(width: 32, alignment: .trailing)
Text(element.element)
.font(.system(.caption, design: .monospaced))
Spacer()
}
.background(
ZStack(alignment: .top) {
Color.green
GeometryReader { geometry in
Path { path in
path.move(to: .zero)
path.addLine(to: CGPoint(x: geometry.size.width, y: 0))
}
.strokedPath(StrokeStyle(lineWidth: 1, dash: [1,2]))
.foregroundColor(Color.red)
}
}
)
}
}
}

一个关键点是 ScrollView 不是垂直堆叠的容器。它只是获取其内容并使其可滚动。它在你的代码中的内容是一个 ForEach,它生成 View ;它并不真的打算将它们列出来。因此,当您将 ScrollView 与 ForEach 结合使用时,没有什么真正负责按照您想要的方式放置 View 。要垂直堆叠 View ,您需要一个 VStack。

您也可以将其应用于您的结构,但添加另一个 VStack,并获得相同的结果:
ScrollView {
VStack(spacing: 0) { // <---
ForEach(self.elements, id: \.self) { element in
VStack(alignment: .leading, spacing: 0) {
GeometryReader { geometry in
Path { path in
path.move(to: .init(x: 0, y: 0))
path.addLine(to: .init(x: geometry.size.width, y: 0))
}
.strokedPath(.init(lineWidth: 1, dash: [1,2]))
}
.foregroundColor(.red)
.frame(height: 1)

HStack {
Text("\(element.index+1)")
.font(.system(.caption, design: .rounded))
.frame(width: 32, alignment: .trailing)
Text(element.element)
.font(.system(.caption, design: .monospaced))
.frame(maxWidth:nil)
Spacer()
}
}
.background(Color.green) // <-- Moved
}
}
}

关于swiftui - SwiftUI 中 ScrollView 中 VStack 元素中的神秘间距或填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60009646/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com