iOS开发之SwiftUI_ios swiftui

iOS开发之SwiftUI

在iOS开发中SwiftUI与Objective-C和Swift不同，它采用了声明式语法，相对而言SwiftUI声明式语法简化了界面开发过程，减少了代码量。
由于SwiftUI是Apple推出的界面开发框架，从iOS13开始引入，Apple使用它的目标是为了打通iOS、iPadOS、macOS、watchOS和tvOS用户界面，保证在不同设备上的一致用户体验（跨平台一致性），所以作为iOS开发不可避免的需要逐步向其过渡。
本文主要通过实际开发去了解SwiftUI的优势和具体实现形式。

实时预览

SwiftUI在Xcode中提供了实时预览功能，允许开发者在设计阶段就看到界面元素的布局和外观。
这有助于在开发早期发现并修复潜在的问题，从而提高开发效率。

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            Image(systemName: "chart.bar.xaxis.ascending.badge.clock")
                .imageScale(.large)
                .foregroundColor(.mint).scaleEffect(3.0)
            Spacer()
            Text("逝者如斯夫，不舍昼夜！").foregroundColor(.mint).font(.title).fontWeight(.heavy)
        }
        .padding().background {
            SakuraRainView()
        }
    }
}

#Preview {
    ContentView()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

强大的动画和过渡支持

SwiftUI内置了丰富的动画和过渡效果，使得开发者能够轻松地创建流畅且吸引人的用户界面。
这些动画和过渡效果可以帮助提升应用的用户体验。

struct HexagonShape: Shape {
    var size: CGFloat
      
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let centerX = rect.midX
        let centerY = rect.midY
        let sideLength = size / 2
        
        let angle: CGFloat = CGFloat.pi / 3
        let radius: CGFloat = sideLength / sin(angle / 2)
          
        let points = [
            CGPoint(x: centerX + radius * cos(0 * angle), y: centerY + radius * sin(0 * angle)),
            CGPoint(x: centerX + radius * cos(1 * angle), y: centerY + radius * sin(1 * angle)),
            CGPoint(x: centerX + radius * cos(2 * angle), y: centerY + radius * sin(2 * angle)),
            CGPoint(x: centerX + radius * cos(3 * angle), y: centerY + radius * sin(3 * angle)),
            CGPoint(x: centerX + radius * cos(4 * angle), y: centerY + radius * sin(4 * angle)),
            CGPoint(x: centerX + radius * cos(5 * angle), y: centerY + radius * sin(5 * angle))
        ]
          
        path.move(to: points[0])
        for i in 1..<points.count {
            path.addLine(to: points[i])
        }
        path.closeSubpath()
          
        return path
    }
}

struct SakuraView: View {
    
    @State var animated = false
    @State var opacity = Double.random(in: 0...1)
    @State var offsetX = Double.random(in: -320...320)
    @State var offsetY = Double.random(in: -600...600)
    @State var scale = Double.random(in: 0...2)
    @State var duration = Double.random(in: 1...5)
      
    var body: some View {
        HexagonShape(size: 30)
            .fill([Color.pink, Color.green, Color.blue, Color.yellow][Int.random(in: 0...3)].opacity(opacity))
            .frame(width: 30, height: 30)
            .offset(x:offsetX, y: offsetY)
            .scaleEffect(scale).rotationEffect(.degrees(Double.random(in: 0...360)))
            .animation(.easeInOut(duration: duration).repeatForever(autoreverses: true), value: animated).onAppear {
                opacity = Double.random(in: 0...1)
                offsetX = Double.random(in: -320...320)
                offsetY = Double.random(in: -600...600)
                scale = Double.random(in: 0...2)
                duration = Double.random(in: 1...5)
                animated.toggle()
            }
    }
}

struct SakuraRainView: View {
    let sakuraCount = 200 // 樱花的数量
    @State var animated = false
    @State var offsetX = Double.random(in: -320...320)
    @State var offsetY = Double.random(in: -600...600)
    @State var duration = Double.random(in: 1...5)
      
    var body: some View {
        ZStack {
            ForEach(0..<sakuraCount, id: \.self) { index in
                SakuraView()
                    .offset(x:offsetX, y: offsetY)
                    .animation(.easeInOut(duration: duration), value: animated).onAppear {
                        offsetX = Double.random(in: -320...320)
                        offsetY = Double.random(in: -600...600)
                        duration = Double.random(in: 1...5)
                        animated.toggle()
                    }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

让我们来看看效果，以下。

与Swift的集成

SwiftUI是基于Swift语言开发的，因此它与Swift的集成非常紧密。
这意味着开发者可以充分利用Swift的强大功能和特性来构建复杂的用户界面。

状态管理

在SwiftUI中，状态管理通过使用特定的属性包装器来管理视图的状态。
主要的属性包装器包括@State和@Binding。
@State用于管理单个视图的局部状态，而@Binding则用于在不同视图之间共享数据。
当状态值改变时，SwiftUI会自动更新UI以反映最新的状态，无需手动操作视图更新。这种自动更新机制极大地简化了状态管理的复杂性，提高了开发效率。
另外，为了确保数据的一致性和可预测性，SwiftUI推荐使用不可变数据结构来管理状态。
通过使用这些属性包装器和不可变数据结构，开发者可以轻松实现视图状态的管理和更新。