【问题标题】:SwiftUI: How to remove margin between views in VStack?SwiftUI:如何删除 VStack 中视图之间的边距?
【发布时间】:2020-01-20 22:30:36
【问题描述】:

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

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

【问题讨论】:

    标签: swiftui vstack


    【解决方案1】:

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

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

    【讨论】:

    • VStack(spacing: -120) { // 这里的内容 }。也可以使用负数。尝试将 -120 更改为最佳外观。
    • 即使我添加了 'spacing: 0' 空间仍然存在。
    • @BollMose 也许您的子视图正在定义上方或下方的空间?
    【解决方案2】:

    分开

    您可以在任何视图上使用offset 修饰符,以使其对于每个内容分别看起来不同:

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

    请注意它可能在两个方向上都是负数。


    一次性

    VStackHStack 也有一个名为 spacing 的参数,您可以将其设置为 0 或您需要将其应用于所有元素的任何其他数字。

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

    请注意,如果需要, 可能是负数。

    【讨论】:

      【解决方案3】:

      我用这个,

      .padding(.top, -8)
      

      这里有更多细节,

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

      【讨论】:

      • 感谢您提供此代码 sn-p,它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法,并使其对有其他类似问题的未来读者更有用,从而大大提高其长期价值。请edit您的回答添加一些解释,包括您所做的假设。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-06-13
      • 2014-02-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多