參考：SwiftUI 教程

基礎用法

Text

Customize the Text View 自定義TextView
VCtack:豎向布局
HStack:橫向布局
Spacer：空白

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

Image

Create a Custom Image View 圖片
clipShape 切割方式

    var body: some View {
        
        VStack {
            Image("timg-2")
            Text("上圖：原圖")
            Spacer()
            Text("下圖：圓形切割")
            Image("timg-2")
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.white, lineWidth: 8))
                .shadow(radius: 20)
        }
        .padding(.vertical, 90.0)
    }

Use UIKit and SwiftUI Views Together 將UIKit與SwiftUI結合使用

UIViewRepresentable

• UIKit視圖的容器，用這個將視圖裝起來集成到SwiftUI視圖中去。

  A wrapper for a UIKit view that you use to integrate that view into your SwiftUI view hierarchy.

• UIViewRepresentable 需要實現兩個方法：makeUIView(context:) 和 updateUIView(_:context:)

  The UIViewRepresentable protocol has two requirements you need to add: a makeUIView(context:) method that creates an MKMapView, and an updateUIView(_:context:) method that configures the view and responds to any changes.

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(latitude: 22.011286, longitude: 112.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

Compose the Detail View 將獨立的SwiftUI組合在一起

• Spacer

  A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack.
  一種可伸縮的空間，它沿其包含的堆棧布局的主軸展開，如果不包含在堆棧中，則在兩個軸上展開。
  大致意思應該是按空間（橫向或者縱向）展開，如果放在底（左）部，在將視圖向上（右）頂，放在頂（右）部，則將視圖向下（左）頂，如果放在兩個的中間，則向兩邊頂。

• edgesIgnoringSafeArea

  Changes the view’s proposed area to extend outside the screen’s safe areas.
  從頂部安全區域（狀態欄）開始

• 在主ContentView.swift文件中，將想要拼接在一起的視圖按需要的位置組裝起來。

    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)
                .edgesIgnoringSafeArea(.top)
            
            CircleImage()
                .offset(y: -100)
                .padding(.bottom, -100)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
            
            Spacer()
        }
    }