【SwiftUI】浅学

222.jpeg

编译

刷新机制

Xcode的预览使用了动态替换body属性，但是body以外被改变，需要重新resum.快捷键 Option+Command+P

多种机型同时预览

struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
            ContentView().previewDevice("iPhone SE")
            ContentView().previewDevice("iPad Air 2")
        }
    }
}

UI相关

SwiftUI的modifier分俩种

• 一种是font.foregroudColor的原地modifier,对顺序不敏感

• 另一种padding,background是封装类modifer,对顺序敏感

padding/spacing

• padding把当前的View包裹在新的View里，并在四周填充空白,
• spacing：每个子元素的间隔

scaleEffect缩放

let scale = 0.4
var body: some View {
        Button(action: action) {
            Text("0")
        }
   }.scaleEffect(scale) 
 }

minWidth/maxWidth

View的尺寸是根据其内容以及子View自动适配, Text是有其内容大小决定宽度, 如果设置 Frame 中的 minWidth 和 maxWidth ，则为 Text 的宽度定义了范围，这会“提示” Text 不必遵守内容尺寸，而是去适应容器的尺寸。将 .infinity 传递给 maxWidth，表示不对最大宽度进行限制，这种情况下 Text会尽可能占据它的容器的宽度，变为全屏宽

方法

ForEach

.ForEach 是 SwiftUI 中一个用来列举元素，并生成对应 View collection 的类型。它接受一个数组，且数组中的元素需要满足 Identifiable 协议

extension CalculatorButtonItem: Hashable {}

let row: [CalculatorButtonItem]

ForEach(row, id: \.self) { item in }

思维

Store,Action,Reducer

• app当做一个状态机
• 状态保存在Store中,称State
• View不能直接操作State,通过Action方式，间接改变存在Store中的State
• Reducer接收原有State和发送的State，组成新State
• 用新State替换旧的，并驱动更新界面

关键字

@State

赋值触发刷新，body再次调用，适合声明一个值类型, 且通常private标记。

@Binding

@State在传递过程，发生值语义copy导致底层属性无法改变顶层属性，@binding就是将值语义转换为引用语义，传递时需要加$.

ObservableObject/ObservedObject/ObjectBinding

• 实现的类必须是class
• 必须实现的属性是objectWillChange,充当广播
• 使用时需要属性需要声明ObservedObject

class CalculatorModel: ObservableObject {
       let objectWillChange = PassthroughSubject<Void, Never>()
} // PassthroughSubject提供send方法通知事件改变，驱动UI刷新

var brain: CalculatorBrain = .left("0") {
  willSet { objectWillChange.send() }
}

@Published

自动生成objectWillChange相关代码

@EnvironmentObject

• 属性的传递链如果太长，而且中间的相关View未必使用到，可以考虑使用@EnvironmentObject修饰属性，就可以把ObservableObject的值注入到指定View中

• 不会在类型中自动创建变量

  @EnvironmentObject var model: Model
  

• 可以在SceneDelegate.swift中创建

  window.rootViewController = UIHostingController(
    rootView: ContentView().environmentObject(Model())
  )
  
  

• 预览生效

  struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
      ContentView().environmentObject(Model())
  }
  

@propertyWrapper

@State，@Binding，@ObservableObject， @EnvironmentObject等都是@propertyWrapper修饰的属性包装的struct类型

@propertyWrapper
public struct State<Value> : 
DynamicViewProperty, BindingConvertible 
{
      public init(initialValue value: Value)
      public var value: Value { get nonmutating set }
      public var wrappedValue: Value { get nonmutating set }
      public var projectedValue: Binding<Value> { get }
}

• 例如@State 的声明，在底层将 brain 属性“包装”到了一个 State<CalculatorBrain>，所以能访问引用语义的值
• 通常是访问wrappedValue的值
• $访问的是projectedValue属性，返回Binding类型的值
• 所有依赖get和set的重复方法可以使用属性包装得到更好解决，例如UserDefault和Keychain

@propertyWrapper struct Converter {
    
    let from: String
    let to: String
    let rate: Double
    
    var value: Double
    
    var wrappedValue: String {
        get {"\(from)\(value)"}
        set {value = Double(newValue) ?? -1}
    }
    
    var projectedValue: String {
        return "\(to)\(value*rate)"
    }
    
    init(from: String, to: String, rate: Double, initialValue: String) {
        self.from = from
        self.to = to
        self.rate = rate
        self.value = 0
        self.wrappedValue = initialValue
    }
}

@Converter(from: "CNY", to: "USD", rate: 6.88, initialValue: "100") var usd_cny

总结

• View内部状态存储使用@State/@Binding
• 跨越View层级共享使用@ObservableObject/ObservedObject
• 跨越式层级共享使用@EnvironmentObject

实际开发中吃不准的话，先用@ObservableObject/ObservedObject，后面再进行改造