当前位置：首页 > news >正文

iOS 开发入门：SwiftUI 快速搭建原生应用

news 2026/3/26 23:25:07

SwiftUI 快速搭建原生应用示例

以下是一个基于 SwiftUI 的 iOS 应用基础模板，包含常见的 UI 组件和交互逻辑：

基础视图结构

import SwiftUI struct ContentView: View { @State private var textInput: String = "" @State private var toggleState: Bool = false @State private var sliderValue: Double = 0.5 var body: some View { NavigationView { Form { Section(header: Text("输入控件")) { TextField("请输入内容", text: $textInput) Text("已输入: \(textInput)") } Section(header: Text("开关控件")) { Toggle("启用功能", isOn: $toggleState) if toggleState { Text("功能已启用") .foregroundColor(.green) } } Section(header: Text("滑动条")) { Slider(value: $sliderValue, in: 0...1) Text("当前值: \(sliderValue, specifier: "%.2f")") } Section { Button(action: { print("按钮被点击") }) { Text("提交按钮") .frame(maxWidth: .infinity) } .buttonStyle(.borderedProminent) } } .navigationTitle("SwiftUI 示例") } } }

网络请求示例

struct APIView: View { @State private var posts: [Post] = [] var body: some View { List(posts) { post in VStack(alignment: .leading) { Text(post.title) .font(.headline) Text(post.body) .font(.subheadline) } } .onAppear { fetchData() } } func fetchData() { guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else { return } URLSession.shared.dataTask(with: url) { data, _, _ in if let data = data { let decoder = JSONDecoder() if let decoded = try? decoder.decode([Post].self, from: data) { DispatchQueue.main.async { self.posts = decoded } } } }.resume() } } struct Post: Codable, Identifiable { let id: Int let title: String let body: String }

动画效果实现

struct AnimationView: View { @State private var scale: CGFloat = 1.0 var body: some View { VStack { Circle() .fill(.blue) .frame(width: 100, height: 100) .scaleEffect(scale) .onTapGesture { withAnimation(.spring(response: 0.5, dampingFraction: 0.3)) { scale = scale == 1.0 ? 1.5 : 1.0 } } Text("点击圆圈") .padding(.top, 20) } } }

导航和页面跳转

struct DetailView: View { let item: String var body: some View { VStack { Text("详情页面") .font(.largeTitle) Text("接收的参数: \(item)") .padding() } } } struct NavigationExample: View { let items = ["苹果", "香蕉", "橙子"] var body: some View { NavigationView { List(items, id: \.self) { item in NavigationLink(destination: DetailView(item: item)) { Text(item) } } .navigationTitle("水果列表") } } }

这些代码示例涵盖了 SwiftUI 开发中的常见场景，包括：