遵循 Apple 指南的 SwiftUI 简单问题

Question

我刚刚开始在名为 creating and combining views 的网站上关注 Apple 的 SwiftUI 课程。

我注意到 ContentView 结构中显示的代码中有一个我无法理解的奇怪行为，这是代码和结果的图像。

struct ContentView: View {
var body: some View {
    VStack {
        MapView()
            .edgesIgnoringSafeArea(.top)
            .frame(height: 300)
        
        CircleImage()
            .offset(y : -130)
            .padding(.bottom, -130)

        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
        
        Spacer()
    }
}

}

这里特别注意，但是将 MapView 的修饰符的顺序更改为时。

        MapView()
            .frame(height: 300)
            .edgesIgnoringSafeArea(.top)

circleView 的中心不再位于 mapView 的底部，见图。

我注意到当我删除底部的 Spacer() 时不会发生这种情况，

那么，这里到底发生了什么？为什么修饰符的顺序很重要？ Spacer() 如何以这种方式影响其他视图？

感谢您的帮助。

Answer 1

Why modifier order matters.

因为您在创建框架时没有忽略第二个代码上的安全区域。

此外，当您添加垫片时，您的底部床单会变得更高。所以看起来不错，但是一点效果都没有。

在这种情况下，最好将圆形图像和底部内容放在同一个容器中。所以它将始终居中。例如：

VStack {
    CircleImage()
        .offset(y : -130)
        .padding(.bottom, -130)
    
    VStack(alignment: .leading) {
        Text("Turtle Rock")
            .font(.title)
        HStack {
            Text("Joshua Tree National Park")
                .font(.subheadline)
            Spacer()
            Text("California")
                .font(.subheadline)
        }
    }
    .padding()
    
    Spacer()
}