遵循 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.

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

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

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

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

遵循 Apple 指南的 SwiftUI 简单问题

SwiftUI simple question following Apple's guide

ios

swiftui

mkmapview