SwiftUI VStack 和 Spacer 的行为不符合文档

Question

在 SwiftUI Apple Watch 应用程序中，我们需要在垂直滚动视图中对齐一些文本，以便：

• 如果内容较小，则应放置在屏幕底部。
• 如果内容不适合屏幕的下半部分，它应该在底部延伸到屏幕之外，这样用户就必须向下滚动才能查看其余的内容。

到目前为止我的看法是：

import SwiftUI

struct ContentView: View {

  var body: some View {
    GeometryReader { geometry in
      ZStack {
        ScrollView(.vertical) {
          VStack(alignment: .leading, spacing: 0) {
            Spacer()
              .frame(minHeight: geometry.size.height / 2)
            Text("Title")
              .bold()
              .background(.red.opacity(0.2))
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
              .background(.red.opacity(0.2))
          }
            .frame(minHeight: geometry.size.height - 20)
            .background(.blue.opacity(0.4))
        }
      }
        .padding(10)
        .frame(width: geometry.size.width, height: geometry.size.height)
    }
      .ignoresSafeArea()
  }
}

正如您所看到的，Spacer和frame(minHeight: ...)部分用于将内容放置在底部。的ScrollView大小固定为整个屏幕。

但是，文本并未完整显示。它看起来是这样的：

如您所见，内容并非从屏幕中间开始。显然Spacer变得比它更大minHeight。然而，Spacer据记录，它仅占用VStack. 里面没有多余的空间VStack，所以Spacer高度只能和它一样高minHeight。

我缺少什么？

这是滚动到底部时的样子：

为什么这段文字被剪掉了？

Answer 1

解决这个问题最重要的部分是布局优先级。为了防止Spacer无限扩展（因为ScrollView将为其内容提供所需的空间），我们需要定义哪个优先。如果不定义优先级，默认情况下 SwiftUI 似乎只是在Spacer和所有Text如果不定义优先级，默认情况下 SwiftUI 似乎只是以50/50 的

我们可以使用修饰符降低扩展的优先级。还进行了一些其他细微调整，例如设置最小高度，以便文本在较短时与底部对齐。SpacerlayoutPriority(_:)VStack

完整代码：

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            ScrollView {
                VStack(alignment: .leading, spacing: 0) {
                    Spacer()
                        .frame(maxWidth: .infinity, minHeight: geo.size.height / 2)
                        .layoutPriority(-1)

                    Text("Title")
                        .bold()
                        .background(.red.opacity(0.2))

                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
//                    Text("Much shorter text.")
                        .background(.red.opacity(0.2))
                }
                .frame(minHeight: geo.size.height)
                .background(.blue.opacity(0.4))
            }
        }
        .padding(10)
        .navigationBarHidden(true)
        .ignoresSafeArea()
    }
}

结果：

长文本	短文本