实例1

效果图

image.png

代码

import SwiftUI

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(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }.padding(.horizontal,50)

            Spacer()
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

备注：

• 最后，要允许地图内容扩展到屏幕的上边缘，请将edgesignoringsafearea（.top）修饰符添加到地图视图中。
• CircleImage()
  .offset(y: -130)
  .padding(.bottom, -130)
  让图片整体上移130pt
• padding(.horizontal,50)
  让元素在水平方向左右各挤压50pt位置