SwiftUI简例

1、地图

// MapView
import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        return MKMapView(frame: .zero)
    }

    func updateUIView(_ uiView: MKMapView, context: Context) {
        // 经纬度
        let location = CLLocationCoordinate2D(latitude: 40.00491139888854, longitude: 116.2896180152893)
        // 距原点范围
        let span = MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5)
        let region = MKCoordinateRegion(center: location, span: span)
        uiView.setRegion(region, animated: true)
    }
}

// ContentView
import SwiftUI

struct ContentView: View {
    var body: some View {
        // 垂直布局
        VStack {
            MapView().frame(height: 300).edgesIgnoringSafeArea(.all)
            Circleimage().offset(y: -130).padding(.bottom, -130)

            VStack(alignment: .leading ) {
                Text("圆明园").font(.title)
                    .foregroundColor(.mint)
                    .padding(.leading, 0.0)
                
                // 水平布局
                HStack {
                    Text("皇家园林").font(.subheadline)
                    Spacer()
                    Text("北京")
                        .font(.system(size: 20, weight: .bold, design: .default))
                }
            }.padding()

            Spacer()
        }
    }
}

2、圆角阴影

struct Circleimage: View {
    var body: some View {
        Image("LOGO")
            .resizable()           // 延伸模式即图片会缩放至填满整个画面(安全区域除外)
            .frame(width: 200, height: 200, alignment: Alignment.center)
            .clipShape(Circle())   // 裁切图片
            .overlay(Circle().stroke(Color.black, lineWidth: 4))  // 叠放组件
            .shadow(radius: 10)    // 阴影
    }
}

3、动画

struct AnimationView: View {

    // 状态,实现值绑定、动态查找与View的重绘
    @State private var showDetail = false

    var body: some View {
        Button {
            // 线性动画
            withAnimation {
                self.showDetail = !self.showDetail
            }
        } label: {
            Text("按钮")
            Image(systemName: "chevron.right.circle")          // 系统图片
                .imageScale(.large)                            // 图片缩放
                .rotationEffect(.degrees(showDetail ? 90 : 0)) // 旋转效果
                .scaleEffect(showDetail ? 1.5 : 1)             // 缩放效果
                .padding()
        }
    }
}

4、@propertyWrapper

• 对一些类似的属性的实现代码做同一封装
• 此外还有 @Binding、@ObservedObject、@EnvironmentObject 装饰器

// 属性装饰器实现UserDefault
@propertyWrapper struct UserDefaultWrapper<T> {
    var key: String
    var defaultValue: T

    init(key: String, defaultValue: T) {
        self.key = key
        self.defaultValue = defaultValue
    }

    var wrappedValue: T {
        get {
            return UserDefaults.standard.value(forKey: key) as? T ?? defaultValue
        }
        set {
            UserDefaults.standard.set(newValue, forKey: key)
        }
    }
}

struct PropertyWrapper: View {
    @UserDefaultWrapper(key: "hasShowGuide", defaultValue: false)
    static var hasShowGuide: Bool

    @State private var showText = PropertyWrapper.hasShowGuide ? "已经展示" : "没有展示"

    var body: some View {
        Button {
            if (!PropertyWrapper.hasShowGuide) {
                PropertyWrapper.hasShowGuide = true
                self.showText = "已经展示过"
            }
        } label: {
            Text(self.showText)
        }
    }
}