ios-swiftui

ios-swiftui

用途

此技能提供 SwiftUI 专业知识，用于在 iOS 应用中构建声明式 UI，重点涵盖视图、状态管理、动画和导航，以简化开发流程。

适用场景

在需要响应式界面的 iOS 项目中使用此技能，例如包含动态内容、用户交互或复杂导航的应用；适用于新建 iOS 应用（iOS 13+）、原型开发或从 UIKit 迁移。

主要功能

• 使用遵循 View 协议的结构体创建和修改视图。
• 使用 @State 管理本地更改，使用 @Binding 实现父子通信，使用 @ObservedObject 管理外部模型，使用 @EnvironmentObject 管理应用范围内的数据。
• 通过 withAnimation{} 和 .animation(.easeIn) 等修饰符实现动画。
• 使用 NavigationStack 处理导航，包括多屏流程中的堆栈、列表和工作表。

使用模式

要构建 SwiftUI 视图，请定义一个遵循 View 的结构体，并在 body 中使用修饰符；要管理状态，请用 @State 包装变量，并通过函数更新。模式：通过在应用的根视图中注入 .environmentObject()，使用 @EnvironmentObject 管理共享数据。对于列表，使用 List{} 搭配 ForEach{} 展示动态内容。始终使用 #Preview{} 预览视图，以便快速迭代。要处理工作表，请在 View 上使用 .sheet(isPresented: $isShowing) {}。

常用命令/API

使用 @State 管理本地状态：@State private var count: Int = 0，然后使用 Button("Tap") { count += 1 } 递增。 直接在视图上应用 .padding() 或 .foregroundColor(.blue) 等修饰符，例如：Text("Hello").padding().background(.yellow)。 对于动画，在带有 .animation(.default) 的视图上包装更改：withAnimation { self.isAnimating.toggle() }。 导航示例：NavigationStack { List(items, id: \.id) { item in NavigationLink { DetailView(item: item) } } }。 配置格式：在 Xcode 中，确保在项目设置中选择 SwiftUI；在文件中导入 SwiftUI。

集成说明

要将 SwiftUI 集成到现有 iOS 项目中，可通过 UIHostingController 向 UIKit 应用添加 SwiftUI 视图；在代码中按如下方式设置：let hostingController = UIHostingController(rootView: MySwiftUIView())。对于应用范围内的对象，在 @main App 结构体中通过 .environmentObject() 传递，例如：@main struct App: App { var body: some Scene { WindowGroup { ContentView().environmentObject(MyModel()) } } }。如果需要 API 密钥（例如用于网络请求），请从 let apiKey = ProcessInfo.processInfo.environment["MY_API_KEY"] 这样的环境变量中读取，并在观察对象中进行处理。确保在 Xcode 项目设置中将 iOS 部署目标设为 13.0+。

错误处理

通过确保 @State 更新在主线程上进行，来处理与状态相关的错误；对于异步更新，请使用 DispatchQueue.main.async，例如：DispatchQueue.main.async { self.data = newData }。对于导航问题，请检查 NavigationStack 路径，并使用 .onAppear{} 验证状态，例如：onAppear { if path.isEmpty { path.append("home") } }。常见错误："Cannot use instance member"——将变量改为 @State；使用 print() 或 os_log 记录错误以便调试。如果绑定失效，请确认已正确传递被包装的值，例如在子视图中检查。

具体使用示例

示例 1：简单计数器视图——使用 @State 创建视图：struct CounterView: View { @State var count: Int = 0 var body: some View { VStack { Text("Count: \(count)") Button("Increment") { count += 1 } } } }。在应用中使用：ContentView().environment(\.colorScheme, .dark)。 示例 2：带列表的导航——构建列表视图：struct ItemList: View { @State var items = [1,2,3] var body: some View { NavigationStack { List(items, id: \.self) { item in Text("Item \(item)") } .navigationTitle("Items") } } }。通过呈现以下视图进行集成：ItemList().sheet(isPresented: $showSheet) { DetailView() }。

图关系

• 关联集群：mobile（例如，与 android-kotlin 技能共享依赖项）。
• 链接至：swift（用于核心语言特性）、ios-core（用于基础 iOS API）。
• 依赖项：构建需要 xcode-tools；与 firebase-ios 集成以提供后端服务。