SwiftUI

SwiftUI是什么？
管方定义：
SwiftUI is a modern way to declare user interfaces for any Apple platform.
SwiftUI是Apple全平台声明式构建UI的开发工具。

苹果开发SwiftUI的原因？
Api采用声明式UI，具有以下优点
->高内聚，可复用性强
->所有UI代码都在body统一位置调用，不需要关注过多的生命周期

struct CustomeView: View {
    struct CustomeView: View {
    @State var title: String = "Hello, World!"
    var body: some View {
        Text(self.title)
    }
}

        let label = UILabel()
        self.addSubview(label)
        label.text = "Hello, World!"
        label.frame = CGRect(x: 0, y: 0, width: 100, height: 100)

SwiftUI 开发
1，页面开发

1，元素组件：Button,Label,Image,List
2，布局组件：VStack垂直布局，HStack水平布局，ZStack重叠布局，padding设置间距，Spacer自动撑满多余间距，frame

2，绑定数据更新
@State:SwiftUI 将会把使用过 @State 修饰器的属性存储到一个特殊的内存区域，并且这个区域和 View struct 是隔离的. 当 @State 装饰过的属性发生了变化，SwiftUI 会根据新的属性值重新创建视图

struct Product: Identifiable {

    var id: String
}

struct ProductsView: View {
    let products: [Product] = [Product(id: "测试1")]

    @State private var showFavorited: Bool = false
    
    var body: some View {
        List {
            Button(
                action: {
                    
                    self.showFavorited = !self.showFavorited
                },
                label: { Text("Change filter") }
            )

            ForEach(products) { product in
                if !self.showFavorited {
                    Text(product.id)
                }
            }
        }
    }
}

@Binding :修饰器修饰后，属性变成了一个引用类型,

struct FilterView: View {
    @Binding var showFavorited: Bool

    var body: some View {
        Button(
            action: {
                self.showFavorited = !self.showFavorited
            },
            label: { Text("Change filter") }
        )
    }
}

struct ProductsBindView: View {
    let products: [Product] = [Product(id: "测试1")]
    
    @State private var showFavorited: Bool = false

    var body: some View {
        List {
            FilterView(showFavorited: $showFavorited)

            ForEach(products) { product in
                if !self.showFavorited {
                    Text(product.id)
                }
            }
        }
    }
}

@ObservableObject和@Published：@ObservedObject 的用处和 @State 非常相似，从名字看来它是来修饰一个对象的，这个对象可以给多个独立的 View 使用。如果你用 @ObservedObject 来修饰一个对象，那么那个对象必须要实现 ObservableObject 协议，然后用 @Published 修饰对象里属性，表示这个属性是需要被 SwiftUI 监听的

final class PodcastPlayer: ObservableObject {
    @Published private(set) var isPlaying: Bool = false

    func play() {
        isPlaying = true
    }

    func pause() {
        isPlaying = false
    }
}

struct EpisodesView: View {
    @ObservedObject var player: PodcastPlayer
    
    var body: some View {
        List {
            Button(
                action: {
                    if self.player.isPlaying {
                        self.player.pause()
                    } else {
                        self.player.play()
                    }
            }, label: {
                    Text(player.isPlaying ? "Pause": "Play")
                }
            )
        }
    }
}

struct EpisodesView_Previews: PreviewProvider {
    static var previews: some View {
        let player = PodcastPlayer()
        EpisodesView(player: player)
    }
}

@StateObject和@ObservedObject：这两个类似都是用于修饰一个对象，区别是声明对象的所有权不同：创建对象的视图必须使用 @StateObject，对于某些复杂场景，多个View公用一个对象处理数据，这时候只有创建的视图使用@StateObject，其他的使用ObservedObject

struct EpisodesViewState: View {
    @StateObject var player: PodcastPlayer = PodcastPlayer()
    
    var body: some View {
        List {
            Button(
                action: {
                    if self.player.isPlaying {
                        self.player.pause()
                    } else {
                        self.player.play()
                    }
            }, label: {
                    Text(player.isPlaying ? "Pause": "Play")
                }
            )
        }
    }
}

@EnvironmentObject：@StateObject和@ObservedObject类似，区别是他用做修饰一个全局的对象

@main
struct swiftUIStateDemoApp: App {
    let persistenceController = PersistenceController.shared

    var body: some Scene {
        let player = PodcastPlayer()
        WindowGroup {
            EpisodesViewEnvironmentObject()
                .environmentObject(player)
        }
    }
}

struct EpisodesViewEnvironmentObject: View {
    @EnvironmentObject var player: PodcastPlayer
    
    var body: some View {
        List {
            Button(
                action: {
                    if self.player.isPlaying {
                        self.player.pause()
                    } else {
                        self.player.play()
                    }
            }, label: {
                    Text(player.isPlaying ? "Pause": "Play")
                }
            )
        }
    }
}

@Environment :用作读取系统的全局变量,也可以读取keyvalue，自定义的全局变量

struct OtherView: View {
    @Environment(\.presentationMode) private var presentationMode: Binding<PresentationMode>
    var body: some View {
        VStack {
            Button("退出登陆") {
                print("loginou")
                self.presentationMode.wrappedValue.dismiss()
            }.foregroundColor(.black)
        }
        .frame(minWidth: 0,maxWidth: .infinity,minHeight: 0,maxHeight: .infinity)
        .background(.red)
    }
}

struct RootPresentationModeKey: EnvironmentKey {
    static let defaultValue: Binding<RootPresentationMode> = .constant(RootPresentationMode())
}

extension EnvironmentValues {
    var rootPresentationMode: Binding<RootPresentationMode> {
        get { return self[RootPresentationModeKey.self] }
        set { self[RootPresentationModeKey.self] = newValue }
    }
}

typealias RootPresentationMode = Bool

extension RootPresentationMode {
    
    public mutating func dismiss() {
        self.toggle()
    }
}

struct WelcomeView: View {
    @State private var isActive : Bool = false
    var body: some View {
        return NavigationView {
            mainView()
        }
        .navigationViewStyle(StackNavigationViewStyle())
        .environment(\.rootPresentationMode, self.$isActive)
    }
}
struct OtherView: View {
    @Environment(\.rootPresentationMode) private var rootPresentationMode: Binding<RootPresentationMode>
    var body: some View {
        VStack {
            Button("退出登陆") {
                print("loginou")
                self.rootPresentationMode.wrappedValue.dismiss()
            }.foregroundColor(.black)
        }
        .frame(minWidth: 0,maxWidth: .infinity,minHeight: 0,maxHeight: .infinity)
        .background(.red)
    }
}

Swift和SwiftUI桥接
通过UIViewRepresentable协议桥接UIKit控件

import SwiftUI
import WebKit

struct ContentView : UIViewRepresentable {
    
    func makeUIView(context: UIViewRepresentableContext<ContentView>) -> WKWebView {
        return WKWebView()
    }
    
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<ContentView>) {
        let request = URLRequest(url:URL(string: "https://apple.com")!)
        uiView.load(request)
    }
}

通过UIHostingController调用SwiftUI控件

let contentView = ContentView()
let tempVc = UIHostingController(rootView: contentView)

ViewModifier控件
作用：封装控件

struct ContentView : View {
    
    var body: some View {
        VStack(alignment: .center, spacing: 40){
            Image("avarta1").modifier(myImageStyle())
            Image("avarta2").modifier(myImageStyle())
            Image("avarta3").modifier(myImageStyle())
        }
        .padding()
    }
}

struct myImageStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .frame(width: 200, height: 200, alignment: .leading)
            .cornerRadius(100)
            .clipped()
            .saturation(0.0)
    }
}

缺点
一些常用功能不支持：
->富文本不支持点击效果，解决方案：侨接UIKit富文本解决问题
->ScrollView不能监听滚动数值，解决方案：桥接UIKit控件，强行拿到ScrollView，通过KVO监听
->不支持播放视频，解决方案：桥接swift原生控件
->NavagationView 不支持侧滑手势：解决方案：还是需要桥接UIKit的UINavagation控件，但这样做感觉UIKit侵入太重了。。。
->TextField在iOS16才支持类似UITextView的功能，iOS15支持自动聚焦功能
->不支持WebView，需要桥接UIKit控件
Demo地址
https://github.com/riceForChina/SwiftUIDemo.git
参考
https://www.modb.pro/db/170297
https://juejin.cn/post/6844903924084768776
https://blog.csdn.net/Forever_wj/article/details/121981007
https://github.com/fzhlee/SwiftUI-Guide#-%E7%AC%AC20%E8%8A%82image-web-