打通SwiftUI任督二脉

序言

开年的第一篇文章，本日分享的是SwiftUI，SwiftUI出来好几年，之前一直没学习，所以现在才开始；如果各人还留在 iOS 开发，这们语言也是一个趋势； 现在待业中....   不得不说已逝的2023年，各人开始都抱着一解封，经济都会向上转好，但是实际不是我们想象那样；现在我也在学习 SwiftUI，而且努力找工作中....；至于 2024 年经济怎样，咱们作为老百姓在大情况和环球经济影响下；坦然面对，提拔本身。 这里不得不说国人坚韧不拔的精神。“卷”  -- 努力吧Coding人
SwiftUI体验

Xcode创建项目之后出现工程默认创建的UI界面；如下

一开始心里对本身说："SwiftUI作为iOS开发新的UI体系，为啥初创的项目这么多代码，给初学者看到，一种压迫感，心想这语法好复杂，不想学了"；不管你是不是如许心里，我刚开始瞥见，这么一坨代码，没什么心思，于是索性删掉；按本身能理解学习的方式来操作；于是做了简化：

1. import SwiftUI
2. import SwiftData
4. struct ContentView: View {
5.    
6.     var body: some View {
7.         Text("hello，word")
8.     }
9. }
11. #Preview {
12.     ContentView()
13.         .modelContainer(for: Item.self, inMemory: true)
14. }

复制代码

关键字 some

关键字some啥玩意儿，完全陌生；先看看View;点击进入源码布局检察：

1. @available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
2. public protocol View {
4.     /// The type of view representing the body of this view.
5.     ///
6.     /// When you create a custom view, Swift infers this type from your
7.     /// implementation of the required ``View/body-swift.property`` property.
8.     associatedtype Body : View
10.     @ViewBuilder @MainActor var body: Self.Body { get }
11. }

复制代码

一堆英文注解估计各人不喜欢看，我就没贴出来了；简单来说：
View 是一个泛型协议，它定义了全部视图类型需要遵照的接口，通过some修饰；表示 "我返回一个满足View 协议的某种类型"。some关键字告诉 Swift，虽然我们知道body必须返回一个View，但我们不确定具体是哪种 View（比方，Text, Image, VStack 等）。
协议里有一个associatedtype，body，其实这种协议就是当作束缚情势使用；只要服从这种协议编译器每次闭包中返回的一定是一个确定，服从View协议的类型。
那么苹果工程师使用Swift5.1 Opaque return types特性,开发者提供了一个灵活的开发模式，抹掉了具体的类型，不需要修改公共API来确定每次闭包的返回类型，也降低了代码书写难度。（学学苹果那些大神思想，不错）
在来看看Preview

1. struct ContentView_Previews:PreviewProvider{
2.     static var previews: some View{
3.         ContentView()
4.         
5.     }
6. }

复制代码

PreviewProvider就一个协议类，它的额作用提供swiftUI不用运行，就能直接看到UI渲染变化，我以为这个挺好，减少开发人员对UI运行测试次数和时间，而previews就是一个静态属性，返回一个 View 对象，用于在预览面板中展示。
@State属性包装器

@State属性包装器解决UI界面上，数据同步以及实时刷新的功能。一般来说数据更新完，界面 UI 同时更新。在 SwiftUI里面，视图中声明的任何状态、内容和布局，源头一旦发生改变，会自动更新视图，因此，只需要一次布局，这个时候出现了@State，它来解决与UI之间数据状态问题。
它的概念就是：@State 是一个属性包装器（property wrapper），用于声明状态属性（state property）
当状态属性发生变化时，SwiftUI 会自动更新视图以反映最新的状态。
属性的值被存储在特殊的内存区域中，这个区域与 View struct 是隔离的 至于被它修饰的属性内存存储与分布现在无从得知，还没学习到那么深入，这事儿慢慢来，不是一天两天的，先上个代码看看它怎么使用的：

1. import SwiftUI
3. struct StateBootcamp: View {
4.    
5.     @State var bgkColor:Color = Color.blue
6.     @State var cut:Int = 0
7.    
8.     var body: some View {
9.         
10.         ZStack{
11.             
12.             bgkColor
13.                 .ignoresSafeArea(.all)
14.             
15.             VStack(spacing: 20){
16.                
17.                 Text("Hello, World!")
18.                     .font(.title)
19.                
20.                 Text("count:\(cut)")
21.                     .font(.largeTitle)
22.                
23.                 HStack(spacing: 20){
24.                     Button("Button01") {
25.                         cut+=1
26.                         bgkColor = Color.red
27.                     }
28.                     .font(.title)
29.                     .foregroundColor(.white)
30.                     
31.                     Button("Button02") {
32.                         cut-=1
33.                         bgkColor = .purple
34.                     }
35.                     .font(.title)
36.                     .foregroundColor(.white)
37.                 }
38.                 Button("默认"){
39.                     cut=0
40.                     bgkColor = .blue
41.                 }
42.                 .font(.title)
43.                 .foregroundColor(.white)
44.             }
45.         }
46.     }
47. }
49. #Preview {
50.     StateBootcamp()
51. }

复制代码

其实一看代码，就一幕了然，知道它的使用与作用；如果你写过swift代码，这些东西很好理解，但是只会OC,那么我建议你学习下swift；在来看swiftUI语法糖才更好理解。
在看看源码:

1. @available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
2. @frozen @propertyWrapper public struct State<Value> : DynamicProperty {
3.     public init(wrappedValue value: Value)
4.     public init(initialValue value: Value)
5.     public var wrappedValue: Value { get nonmutating set }
6.     public var projectedValue: Binding<Value> { get }
7. }
10. @available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
11. extension State where Value : ExpressibleByNilLiteral {
13.     /// Creates a state property without an initial value.
14.     ///
15.     /// This initializer behaves like the ``init(wrappedValue:)`` initializer
16.     /// with an input of `nil`. See that initializer for more information.
17.     @inlinable public init()
18. }

复制代码

可以看到State是一个布局体，由@propertyWrapper包装的。@propertyWrapper是属性包装器。property wrapper 做的事情大体如下：

1. -   为底层的存储变量`State<Int>`自动提供一组 **getter** 和 **setter** 方法，结构体内保存了`Int`的具体数值；
3. -   在 body 首次求值前，将`State<Int>`关联到当前`View`上，为它在堆中对应当前`View`分配一个存储位置。
5. -   为`@State`修饰的变量设置观察，当值改变时，触发新一次的`body`求值，并刷新 UI。

复制代码

SwiftUI底子组件

Spacer垫片：先贴贴代码

1. import SwiftUI
3. struct SpacerBootcampDemo: View {
4.     var body: some View {
5.         Text("Spacer UP")
6.             .font(.largeTitle)
7.         
8.         Spacer()
9.             .frame(width: 37)
10.             .background(.blue)
11.         
12.         Text("Spacer Down")
13.             .font(.largeTitle)
14.         
15.     }
16. }
18. #Preview {
19.     SpacerBootcampDemo()
20. }

复制代码

在看看效果图：

总结：Spacer 是一个灵活的空间视图，它的主要作用是在布局中自动调整自身的高度和宽度，以填满特定的空间；简单来说，它就是一个垫片，调整自身视图的高度，如果它附近有其他视图，也会受到Spacer影响。
ScrollView 如果你之前使用UIkit框架开发，在用SwiftUI，一下有点不适应，代码和之前的 UIkit 开发模式不太一样，但是大大缩短UI编写时间；先上代码:
[code]import SwiftUIstruct ScollViewBootcamp: View {        var body: some View {                ScrollView{            LazyVStack{                ForEach(0..