运行在目标上时 VStack 中缺少顶部元素

Question

我有一个简单的视图，其中包含一个 VStack，一行文本包含列表的标题（想想 header），然后是一个 List。

struct CampaignView : View {
  let campaign: Campaign

  init(from campaign: Campaign) {
    self.campaign = campaign
  }

  var body: some View {
    VStack {
      ObservationRow.titles
        .padding([.top, .leading], 8)
      List(campaign.observations) {
        ObservationRow(from: [=11=])
      }
    }
  } 
}

在模拟器上，一切看起来都不错，但是当我运行在我的目标 (macOS) 上运行时，我的标题行丢失了。注意：预览和目标应用程序的内容不同。这是缺少的顶线。

当我在标题上方添加三个任意文本字段时，最上面的元素再次丢失，现在显示标题，因为它们位于堆栈的更下方。

var body: some View {
    VStack {
      Text("A")
      Text("B")
      Text("C")
      ObservationRow.titles
        .padding([.top, .leading], 8)
      List(campaign.observations) {
        ObservationRow(from: [=12=])
      }
    }
  }

有什么问题？

Answer 1

这是 SwiftUI 框架中的错误，已报告给 Apple。重现此问题的最简单方法是从一个干净的、基于 SwiftUI 的 macOS 项目开始。用这个 body.

修改提供的 ContentView

var body: some View {
  VStack {
    Text("A")
    List(1...4) {
      Text("\([=10=])")
    }
  }
}

Xcode 预览会正确显示，但是当新应用运行在 Mac 上时，"A" 文本元素在标题栏后面丢失window。我们知道它被标题栏剪裁了，因为 SwiftUI 添加（自己）灰色背景到 Text("A") 其中只有几行仍然可见。

目前的解决方法是简单地将 Text(" ") 元素添加到 VStack 中，这样它就会被剪裁，但允许显示堆栈的其余部分。

Answer 2

从 AppDelegate.swift 中的 window 设置中删除 .fullSizeContentView，使其看起来像这样：

window = NSWindow(
    contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
    styleMask: [.titled, .closable, .miniaturizable, .resizable],
    backing: .buffered, defer: false)

现在您的内容视图将显示所有内容！

运行在目标上时 VStack 中缺少顶部元素

Missing top element in VStack when run on target

swift

swiftui

运行 在目标上时 VStack 中缺少顶部元素

Missing top element in VStack when run on target

swift

swiftui

运行在目标上时 VStack 中缺少顶部元素