序言
開年的第一篇文章，今天分享的是SwiftUI，SwiftUI出來好幾年，之前一直沒學習，所以現在才開始；如果大家還留在 iOS 開發，這們語言也是一個趨勢； 目前待業中.... 不得不說已逝的2023年，大家開始都抱著一解封，經濟都會向上轉好，可是現實不是我們想象那樣；目前我也在學習 SwiftUI，並且努力找工作中....；至於 2024 年經濟如何，咱們作為老百姓在大環境和全球經濟影響下；坦然面對，提升自己。 這裡不得不說國人堅韌不拔的精神。“卷” -- 努力吧Coding人
SwiftUI體驗
Xcode建立專案之後出現工程預設建立的UI介面；如下
一開始心裡對自己說："SwiftUI作為iOS開發新的UI體系，為啥初創的專案這麼多程式碼，給初學者看到，一種壓迫感，心想這語法好複雜，不想學了"；不管你是不是這樣心裡，我剛開始看見，這麼一坨程式碼，沒什麼心思，於是索性刪掉；按自己能理解學習的方式來操作；於是做了簡化：
import SwiftUI
import SwiftData
struct ContentView: View {
var body: some View {
Text("hello，word")
}
}
#Preview {
ContentView()
.modelContainer(for: Item.self, inMemory: true)
}
關鍵字 some
關鍵字some啥玩意兒，完全陌生；先看看View;點選進入原始碼結構檢視：
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol View {
/// The type of view representing the body of this view.
///
/// When you create a custom view, Swift infers this type from your
/// implementation of the required ``View/body-swift.property`` property.
associatedtype Body : View
@ViewBuilder @MainActor var body: Self.Body { get }
}
一堆英文註解估計大家不喜歡看，我就沒貼出來了；簡單來說：
View 是一個泛型協議，它定義了所有檢視型別需要遵循的介面，透過some修飾；表示 "我返回一個滿足View 協議的某種型別"。some關鍵字告訴 Swift，雖然我們知道body必須返回一個View，但我們不確定具體是哪種 View（例如，Text, Image, VStack 等）。
協議裡有一個associatedtype，body，其實這種協議就是當作約束形式使用；只要遵守這種協議編譯器每次閉包中返回的一定是一個確定，遵守View協議的型別。
那麼蘋果工程師利用Swift5.1 Opaque return types特性,開發者提供了一個靈活的開發模式，抹掉了具體的型別，不需要修改公共API來確定每次閉包的返回型別，也降低了程式碼書寫難度。（學學蘋果那些大神思想，不錯）
在來看看Preview
struct ContentView_Previews:PreviewProvider{
static var previews: some View{
ContentView()
}
}
PreviewProvider就一個協議類，它的額作用提供swiftUI不用執行，就能直接看到UI渲染變化，我覺得這個挺好，減少開發人員對UI執行測試次數和時間，而previews就是一個靜態屬性，返回一個 View 物件，用於在預覽皮膚中展示。
@State屬性包裝器
@State屬性包裝器解決UI介面上，資料同步以及及時重新整理的功能。一般來說資料更新完，介面 UI 同時更新。在 SwiftUI裡面，檢視中宣告的任何狀態、內容和佈局，源頭一旦發生改變，會自動更新檢視，因此，只需要一次佈局，這個時候出現了@State，它來解決與UI之間資料狀態問題。
它的概念就是：@State 是一個屬性包裝器（property wrapper），用於宣告狀態屬性（state property）
當狀態屬性發生變化時，SwiftUI 會自動更新檢視以反映最新的狀態。
屬性的值被儲存在特殊的記憶體區域中，這個區域與 View struct 是隔離的 至於被它修飾的屬性記憶體儲存與分佈現在無從得知，還沒學習到那麼深入，這事兒慢慢來，不是一天兩天的，先上個程式碼看看它怎麼使用的：
import SwiftUI
struct StateBootcamp: View {
@State var bgkColor:Color = Color.blue
@State var cut:Int = 0
var body: some View {
ZStack{
bgkColor
.ignoresSafeArea(.all)
VStack(spacing: 20){
Text("Hello, World!")
.font(.title)
Text("count:\(cut)")
.font(.largeTitle)
HStack(spacing: 20){
Button("Button01") {
cut+=1
bgkColor = Color.red
}
.font(.title)
.foregroundColor(.white)
Button("Button02") {
cut-=1
bgkColor = .purple
}
.font(.title)
.foregroundColor(.white)
}
Button("預設"){
cut=0
bgkColor = .blue
}
.font(.title)
.foregroundColor(.white)
}
}
}
}
#Preview {
StateBootcamp()
}
其實一看程式碼，就一幕瞭然，知道它的使用與作用；如果你寫過swift程式碼，這些東西很好理解，但是隻會OC,那麼我建議你學習下swift；在來看swiftUI語法糖才更好理解。
在看看原始碼:
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
@frozen @propertyWrapper public struct State<Value> : DynamicProperty {
public init(wrappedValue value: Value)
public init(initialValue value: Value)
public var wrappedValue: Value { get nonmutating set }
public var projectedValue: Binding<Value> { get }
}
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
extension State where Value : ExpressibleByNilLiteral {
/// Creates a state property without an initial value.
///
/// This initializer behaves like the ``init(wrappedValue:)`` initializer
/// with an input of `nil`. See that initializer for more information.
@inlinable public init()
}
可以看到State是一個結構體，由@propertyWrapper包裝的。@propertyWrapper是屬性包裝器。property wrapper 做的事情大體如下：
- 為底層的儲存變數`State<Int>`自動提供一組 **getter** 和 **setter** 方法，結構體內儲存了`Int`的具體數值；
- 在 body 首次求值前，將`State<Int>`關聯到當前`View`上，為它在堆中對應當前`View`分配一個儲存位置。
- 為`@State`修飾的變數設定觀察，當值改變時，觸發新一次的`body`求值，並重新整理 UI。
SwiftUI基礎元件
Spacer墊片：先貼貼程式碼
import SwiftUI
struct SpacerBootcampDemo: View {
var body: some View {
Text("Spacer UP")
.font(.largeTitle)
Spacer()
.frame(width: 37)
.background(.blue)
Text("Spacer Down")
.font(.largeTitle)
}
}
#Preview {
SpacerBootcampDemo()
}
在看看效果圖：
總結：Spacer 是一個靈活的空間檢視，它的主要作用是在佈局中自動調整自身的高度和寬度，以填滿特定的空間；簡單來說，它就是一個墊片，調整自身檢視的高度，如果它周圍有其他檢視，也會受到Spacer影響。
ScrollView 如果你之前使用UIkit框架開發，在用SwiftUI，一下有點不適應，程式碼和之前的 UIkit 開發模式不太一樣，但是大大縮短UI編寫時間；先上程式碼:
import SwiftUI
struct ScollViewBootcamp: View {
var body: some View {
ScrollView{
LazyVStack{
ForEach(0..<20){
(idx) in
VStack {
Text("Hello, World!")
.font(.title)
.foregroundStyle(.white)
.frame(width: UIScreen.main.bounds.width-20,height: 350)
.background(Color.init(cgColor: CGColor(red: CGFloat.random(in: 0..<215)/255.0, green: CGFloat.random(in: 0..<235)/255.0, blue: CGFloat.random(in: 0...247)/255.0, alpha: 0.9)))
.clipShape(RoundedRectangle(cornerRadius: 10))
Rectangle()
.fill(Color.init(cgColor: CGColor(red: CGFloat.random(in: 0...187)/255.0, green: CGFloat.random(in: 0..<210)/255.0, blue: CGFloat.random(in: 0...237)/255.0, alpha: 0.9)))
.frame(width: UIScreen.main.bounds.width-20,height: 530)
.clipShape(RoundedRectangle(cornerRadius: 10))
ScrollView(.horizontal,showsIndicators: false,content: {
LazyHStack{
ForEach(0..<10){
idx in
Rectangle()
.fill(Color.init(cgColor: CGColor(red: CGFloat.random(in: 0...167)/255.0, green: CGFloat.random(in: 0...131)/255.0, blue: CGFloat.random(in: 0...89)/255.0, alpha: 0.9)))
.frame(width: 200, height: 300)
.clipShape(RoundedRectangle(cornerRadius: 10))
}
}
})
.padding(.leading,10)
.padding(.trailing,10)
}
}
}
.frame(width:UIScreen.main.bounds.width)
}
}
}
#Preview {
ScollViewBootcamp()
}
上圖看看效果:
簡單幾句就能實現**ScrollView**的滑動效果；非常方便。
LazyVGrid 網格佈局，先上程式碼：
import SwiftUI
struct GridViewBootcamp: View {
let columns=[
GridItem(.flexible(),spacing: 6 ,alignment: .center),
GridItem(.flexible(),spacing: 6 ,alignment: .center),
GridItem(.flexible(),spacing: 6 ,alignment: .center),
]
var body: some View {
ScrollView{
LazyVGrid(columns: columns,
alignment: .center,
spacing: 6,
pinnedViews: [.sectionHeaders],content:
{
Section(content: {}, header: {
Text("section header 一")
.font(.largeTitle)
.foregroundStyle(.blue)
.frame(width: UIScreen.main.bounds.width,height: 100,alignment: .leading)
})
ForEach(0..<41){
index in
Rectangle()
.fill(Color.init(cgColor: CGColor(red: CGFloat.random(in: 0..<255)/255.0, green: CGFloat.random(in: 0..<255)/255.0, blue: CGFloat.random(in: 0...255)/255.0, alpha: 0.9)))
.frame(height: 50)
}
//-------
Section {
} header: {
Text("section header 二")
.font(.largeTitle)
.foregroundStyle(.blue)
.frame(width: UIScreen.main.bounds.width,alignment: .leading)
}
ForEach(0..<41){
index in
Rectangle()
.fill(Color.init(cgColor: CGColor(red: CGFloat.random(in: 0..<255)/255.0, green: CGFloat.random(in: 0..<255)/255.0, blue: CGFloat.random(in: 0...255)/255.0, alpha: 0.9)))
.frame(height: 50)
}
})
.padding(.leading,6)
.padding(.trailing,6)
.background(.gray)
}.background(.blue)
}
}
#Preview {
GridViewBootcamp()
}
效果圖：
總結：LazyVGrid大家看到這個單詞有個Lazy懶載入的意思，它的內部載入item簡單來說，就是當檢視需要時，才會執行item內容渲染功能，展示UI上。也就這點注意。
SafeArea安全區域：
import SwiftUI
struct SafeAreaBootcamp: View {
var body: some View {
GeometryReader{
src in
Rectangle()
.fill(.blue)
.frame(maxWidth: .infinity,
maxHeight: .infinity)
}
}
}
#Preview {
SafeAreaBootcamp()
}
效果圖：
可以看到上下邊距存在安全區域的，如果禁用安全區域，使用 ignoresSafeArea(.all) 可以去掉。
程式碼如下：
最後說說SwiftUI函式表達
上上程式碼：
import SwiftUI
struct ExtractFunctionsBootcamp: View {
@State var bgc:Color = .red
var body: some View {
normolView
}
var normolView : some View {
setUI()
}
func chageColor() -> Void {
self.bgc = .red
}
func setUI()->some View {
return ZStack{
bgc
.ignoresSafeArea(.all)
VStack(spacing: 20, content: {
Text("Hello, World!")
.font(.largeTitle)
Button(action: {
bgc = .brown
}, label: {
Text("Button")
.font(.largeTitle)
.foregroundStyle(.white)
})
Button {
self.chageColor()
} label: {
Image(systemName: "button.horizontal.top.press")
.resizable()
.foregroundColor(.white)
.aspectRatio(contentMode: .fill)
.frame(width: 50,height: 50)
}
})
}
}
}
#Preview {
ExtractFunctionsBootcamp()
}
其實函式表達跟我們swift語法糖一樣；func 命名；這點和swift語法糖沒什麼區別。
總結（說說我的感想）
優點：
簡潔性：Swift，SwiftUI語法簡潔，編寫程式碼變得更加容易和快速。
安全性：是一種型別安全的程式語言，可以在編譯時檢測型別錯誤，這幫助我們避免許多常見的錯誤，提高程式碼的質量和可靠性。
互操作性：它與Objective-C語言無縫互銜接，是的OC與swift程式碼混編變的更加便捷。
說完優點在說缺點
功能限制：雖然SwiftUI提供了許多常見的UI元件，但與UIKit相比，功能仍然相對有限。在某些複雜的介面需求下，可能需要使用UIKit來實現。
錯誤提示不明確：有時SwiftUI， SwiftUI的錯誤提示可能不夠明確，導致難以定位問題。
UIkit與SwiftUI缺乏無縫相容：兩者相容性不夠理想，這在業務開發中，你可能才能發現。
目前蘋果與市面大量應用也在使用Swift,SwiftUI開發應用，這們語言在應用中佔有讀也是成倍增長。