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-
