38 SwiftUI

SwiftUI

image-20230312113352480.png

• SwiftUI 是一种基于Swift的强大能力，简单创新的构建用户界面的方法，并且可以运行在苹果所有的平台上

image-20230312113624800.png

SwiftUI - 声明式语法

• SwiftUI采用声明式语法，因为你可以简单声明你的用户界面

image-20230312113734752.png

• Xcode11提供了强大的设计工具，可以通过简单的拖拽用SwiftUI生成用户界面

image-20230312114050160.png

• 只需要描述一次的布局-为你的视图声明任何状态的内容和布局，一旦状态发生改变，SwiftUI会自动更新视图的渲染
• 构建可复用的组件-将小型、独立视图组合到更大，更复杂的界面中。在任何为Apple平台所设计的应用之间，共享您的自定义视图
• 精简动画-创建平滑的动画就像调用单个方法一样简单。SwiftUI会在必要时自动计算并过渡动画

SwiftUI设计工具使用指南

创建项目

image-20230312212430872.png

Stacks

image-20230312212509459.png

如何使用SwiftUI构建可复用的组件

地标页例子

image-20230312214019068.png

Image组件

image-20230312214151969.png image-20230312214348729.png image-20230312214400782.png image-20230312214452467.png

struct ContentView: View {
    var body: some View {
        
        VStack {
            //设置安全距离
            MapView().edgesIgnoringSafeArea(.all)
                .frame(height: 300)
            
            CircleImage().offset(y: -130).padding(.bottom, -130)
            
            //左对齐
            VStack (alignment: .leading) {
                Text("圆明园").font(.title)
                HStack {
                    Text("皇家园林").font(.subheadline)
                    Spacer()
                    Text("北京").font(.subheadline)
                }
            }.padding()//边界留白
            
            Spacer()//留白
        }
        
        
    }
}

图片组件

struct CircleImage: View {
    var body: some View {
        //将图片剪切出一个圆
        Image("ymy").clipShape(Circle())
        //加一个边框线
        .overlay(Circle().stroke(Color.black, lineWidth: 4))
        .shadow(radius: 10)//阴影
    }
}

地图组件

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

如何使用SwiftUI实现动画

SwiftUI - 动画

• 在SwiftUI中，你可以将任意的改变过程封装进一个withAnimation块中。默认，SwiftUI会对这种改变采用fade in/out 的方式进行动画

struct AnimationView: View {
    
    //状态 当属性改变时， 会进行重写渲染
    @State private var showDetail = false
    
    var body: some View {
        Button(action: {
            withAnimation {
                self.showDetail = !self.showDetail
            }
        }) {
            Image(systemName: "chevron.right.circle")//使用了一张系统图片
                .imageScale(.large)//尺寸
                .rotationEffect(.degrees(showDetail ? 90 : 0))//旋转90度或0度
                .scaleEffect(showDeatil ? 1.5 : 1)//放大倍数
            .padding()
        }
    }
}

在这里更改显示入口

image-20230312224524873.png

深入理解SwiftUI：实现原理探秘

@propertyWrapper

• 通过property Wrapper机制，对一些类似的属性的实现代码做同一封装
• 通过@propertyWrapper可以移除掉一些重复或者类似的代码

@state

• 通过@State SwiftUI 实现了值的绑定、动态查找和View的自动重现绘制

image-20230312225028447.png image-20230312225141503.png

• 课后题：查看源码，了解@Binding，@ObservedObject，@EnvironmentObject等装饰器的作用

extension UserDefaults {
    public enum Keys {
        static let hadShownUserGuide = "hadShownUserGuide"
    }
    
    var hadShownUserGuide: Bool {
        set {
            set(newValue, forKey: Keys.hadShownUserGuide)
        }
        
        get {
            bool(forKey: Keys.hadShownUserGuide)
        }
    }
}

struct PropertyWrapperView: View {
    @State private var showText = UserDefaults.standard.hasShownUserGuide ? "已经展示" : "没有展示过"
    
    var body: some View {
        Button(action: {
            if (!UserDefaults.standard.hasShownUserGuide) {
                UserDefaults.standard.hasShownUserGuide = true
                self.showText = "已经展示"
            }
        }) {
            Text(self.showText)
        }
    }
}

• 使用propertyWrapper进行统一扩展

@propertyWrapper
struct UserDefaultsWrapper<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 PropertyWrapperView: View {
    
    @UserDefaultsWrapper("hadShownUserGuide", defaultValue: false)
    static var hadShownUserGuide : Bool
    
    @State private var showText = PropertyWrapperView.hasShownUserGuide ? "已经展示" : "没有展示过"
    
    var body: some View {
        Button(action: {
            if (!PropertyWrapperView.hasShownUserGuide) {
                PropertyWrapperView.hasShownUserGuide = true
                self.showText = "已经展示"
            }
        }) {
            Text(self.showText)
        }
    }
}