SwiftUI-基础-1

参考：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()

截屏2020-10-21 15.37.56.png

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

截屏2020-10-21 18.00.48.png

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

截屏2020-10-21 20.49.53.png