温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Mysterious spacing or padding in elements in a VStack in a ScrollView in SwiftUI
swiftui

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

发布于 2020-04-07 11:54:52

我不明白为什么在使用a 呈现自定义水平分隔线为什么在a ForEach内的元素之间会有多余的垂直间距,而a 内的元素VStack如此ScrollViewGeometryReader

        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)
            }
        }

上面的代码产生了这一点: 在此处输入图片说明

随着.frame(maxHeight: 1)蓝色填充的消失,但是连续的HStacks 之间仍然存在空白
在此处输入图片说明

我希望垂直间距在此图像中类似,即0。此图像是通过取消注释Text("test")源并注释GeometryReader代码来实现的。 在此处输入图片说明

我正在使用Xcode 11.3.1 (11C504)

查看更多

提问者
andrewz
被浏览
206
Rob Napier 2020-02-01 04:01

如果我了解您的最终目标,那就是使每一行都在上方用虚线包围,并且它们之间没有填充,如下所示:

行用红色虚线分隔

在这种情况下,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,它会生成视图;它并不是真的打算将它们布置出来。因此,当您将ScrollView与ForEach结合使用时,实际上并没有真正负责按照您想要的方式放置视图。要垂直堆叠视图,您需要一个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
        }
    }
}