iOS开发之SwiftUI

iOS开发之SwiftUI

iOS开发中SwiftUIObjective-CSwift不同,它采用了声明式语法 ,相对而言SwiftUI声明式语法简化了界面开发过程,减少了代码量。

由于SwiftUIApple推出的界面开发框架,从iOS13开始引入,Apple使用它的目标是为了打通iOSiPadOSmacOSwatchOStvOS用户界面,保证在不同设备上的一致用户体验(跨平台一致性 ),所以作为iOS开发不可避免的需要逐步向其过渡。

本文主要通过实际开发去了解SwiftUI的优势和具体实现形式。

实时预览

SwiftUIXcode中提供了实时预览功能,允许开发者在设计阶段就看到界面元素的布局和外观。

这有助于在开发早期发现并修复潜在的问题,从而提高开发效率。

swift 复制代码
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()
}

强大的动画和过渡支持

SwiftUI内置了丰富的动画和过渡效果,使得开发者能够轻松地创建流畅且吸引人的用户界面。

这些动画和过渡效果可以帮助提升应用的用户体验。

swift 复制代码
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()
                    }
            }
        }
    }
}

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

SwiftUI动画

与Swift的集成

SwiftUI是基于Swift语言开发的,因此它与Swift的集成非常紧密。

这意味着开发者可以充分利用Swift的强大功能和特性来构建复杂的用户界面。

状态管理

SwiftUI中,状态管理通过使用特定的属性包装器来管理视图的状态。

主要的属性包装器包括@State@Binding
@State用于管理单个视图的局部状态,而@Binding则用于在不同视图之间共享数据。

当状态值改变时,SwiftUI会自动更新UI以反映最新的状态,无需手动操作视图更新。这种自动更新机制极大地简化了状态管理的复杂性,提高了开发效率。

另外,为了确保数据的一致性和可预测性,SwiftUI推荐使用不可变数据结构来管理状态。

通过使用这些属性包装器和不可变数据结构,开发者可以轻松实现视图状态的管理和更新。

相关推荐
mascon1 小时前
U3D打包IOS的自我总结
ios
名字不要太长 像我这样就好1 小时前
【iOS】继承链
macos·ios·cocoa
karshey2 小时前
【IOS webview】IOS13不支持svelte 样式嵌套
ios
潜龙95272 小时前
第4.3节 iOS App生成追溯关系
macos·ios·cocoa
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
神策技术社区18 小时前
iOS 全埋点点击事件采集白皮书
大数据·ios·app
wuyoula18 小时前
iOS V2签名网站系统源码/IPA在线签名/全开源版本/亲测
ios
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
fishycx19 小时前
iOS 构建配置与 AdHoc 打包说明
ios
90后的晨仔20 小时前
ios 集成阿里云的AI智能体报错CocoaPods could not find compatible versions for pod "AUIAICal
ios