SwiftUI：如何删除 VStack 中视图之间的边距？

Question

我使用 SwiftUI 创建了一个 VStack，其中包含一些固定元素和一个列表元素。原因是，用户应该只滚动固定元素下方的区域。现在我在第二个固定元素和列表之间看到一个 space 。我不知道这个 space 是从哪里来的，想摆脱它，但不知道如何摆脱它。该区域以红色标记。

struct DashboardView : View, CoreDataInjected {

    var body: some View {
        GeometryReader { geometry in
            VStack {
                ScopeSelectorView().frame(maxWidth: .infinity).background(ColorPalette.gray)
                BalanceNumberView().frame(maxWidth: .infinity)
                List {
                    DashboardNavigationView(
                        height: geometry.size.height - ScopeSelectorView.height - BalanceNumberView.height
                    ).frame(maxWidth: .infinity).listRowInsets(.zero)
                }
            }
        }.background(Color.red).edgesIgnoringSafeArea(.all)
    }
}

Answer 1

由于您没有将 spacing 参数传递给 VStack，它会根据上下文选择默认间距。如果您不想要间距，请显式传递 0。

VStack(spacing: 0) {
    // content here
}

Answer 2

分别

您可以在任何视图上使用 offset 修饰符，使每个视图分别看起来不同：

VStack {
    Circle()
    Circle().offset(x: 0, y: -20)
    Circle().offset(x: 0, y: 40)
}

注意两个方向都可能为负

一次全部

此外，VStack 和 HStack 有一个名为 spacing 的参数，您可以将其设置为 0 或您需要将其应用于所有元素的任何其他数字。

VStack(spacing: 0) {
    Circle()
    Circle()
}

请注意，如果需要， 可以为负值。

Answer 3

我用这个，

.padding(.top, -8)

这里有更多细节，

VStack(spacing: 0) {
   List { ...
   }
   VStack{ ... }.padding(.top, -8)
}

SwiftUI：如何删除 VStack 中视图之间的边距？

SwiftUI: How to remove margin between views in VStack?

swiftui

vstack

分别

一次全部