Project ARKit + SwiftUI + 不同的布局预览/模拟器答案

【问题标题】：Project ARKit + SwiftUI + Different layout preview/simulatorProject ARKit + SwiftUI + 不同的布局预览/模拟器
【发布时间】：2021-07-11 20:22:31
【问题描述】：

我不明白为什么模拟器中的布局与 xcode/preview 中显示的布局不同。

struct ContentView : View {
    var body: some View {
        ZStack(alignment: .bottom) {
            ARViewContainer()
            Text("hello")
        }
    }
}

这里是截图：

【问题讨论】：

标签： swiftui realitykit

【解决方案1】：

TLDR;我不知道为什么你的模拟器和预览不匹配，但我知道为什么它在设备上的显示方式是这样的。您在调试中是否遇到任何错误？

SwiftUI 中的任何容器视图都只会占用它们所需的空间。他们还将根据您的设置进行分发。例如，您有一个包含底部对齐的 ZStack。您还有一个 ARViewContainter() 占用了该堆栈的一部分。它们在 Z 轴上相互对齐，其中文本在前面，另一个容器在后面。例如，证明和测试它的一种快速方法是在所有内容后面包含背景形状。

var body: some View {
    ZStack {
        Rectangle().edgesIgnoringSafeArea(.all)
                   .foregroundColor(Color.red)
        //Your Views 
    }
}

这将强制 ZStack 占用所有可用空间，然后您的其他视图应按预期对齐。基本上，您的Text 与您的ARViewContainer() 提供的最大提供空间的底部对齐

进一步阅读和理解

除非另有说明，否则视图只占用其中所需的空间。
ZStacks 在Z 轴上向前/向后运行。

在您的情况下，您有一个名为 ARViewContainer() 的视图，它占据了屏幕的宽度和部分高度。由于它是您拥有的最大视图，因此 ZStack 继承了该大小。

您的文本小于 ZStack，因此 ZStack 不会继承大小。但是，您确实有一个 .bottom 分配。因此，您的文本位于您的 ARViewContainer() 上方并与该容器的 .bottom 边缘对齐。

最后，ZStack 位于剩余可用空间的中心，给人的印象是您的 .bottom 没有做任何事情，而实际上确实如此。

重现问题

这是一个代码 sn-p，它重现了您的问题，并使其更加清晰易懂。

var body: some View {
    ZStack(alignment: .bottom) {
        Rectangle().foregroundColor(Color.yellow).frame(width: 100, height: 100, alignment: .center)
        Text("Test")
    }
}

【讨论】：