效果圖

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

備注：

• 最后，要允許地圖內(nèi)容擴(kuò)展到屏幕的上邊緣，請將edgesignoringsafearea（.top）修飾符添加到地圖視圖中。
• CircleImage()
  .offset(y: -130)
  .padding(.bottom, -130)
  讓圖片整體上移130pt
• padding(.horizontal,50)
  讓元素在水平方向左右各擠壓50pt位置