SwiftUI 入门指南：快速构建跨平台应用

SwiftUI 是苹果推出的一个强大的 UI 框架，允许开发者使用声明式语法快速构建跨平台应用。它支持 iOS、macOS、tvOS 和 watchOS 等多个平台，帮助开发者以更少的代码实现更多功能。以下是 SwiftUI 中一些常用的 API 和示例代码，帮助你快速上手。

视图和控件

1. Text

用于显示静态文本，可以设置字体、颜色、对齐方式等属性。

swift 复制代码

Text("Hello, SwiftUI!")
    .font(.title)
    .foregroundColor(.blue)

2. Image

用于显示图像。

swift 复制代码

Image("image-name")
    .resizable()
    .frame(width: 100, height: 100)

3. Button

用于创建按钮。

swift 复制代码

Button("点击我") {
    print("按钮被点击")
}

4. TextField

用于输入文本。

swift 复制代码

@State private var text = ""

TextField("输入文本", text: $text)

5. Toggle

用于开关控件。

swift 复制代码

@State private var isOn = false

Toggle("开关", isOn: $isOn)

布局容器

1. VStack

垂直堆叠视图。

swift 复制代码

VStack {
    Text("文本1")
    Text("文本2")
}

2. HStack

水平堆叠视图。

swift 复制代码

HStack {
    Text("文本1")
    Text("文本2")
}

3. ZStack

层叠视图。

swift 复制代码

ZStack {
    Image("背景")
    Text("文本")
}

4. List

列表视图。

swift 复制代码

struct Item: Identifiable {
    let id = UUID()
    var name: String
}

@State private var items: [Item] = [
    Item(name: "Item1"),
    Item(name: "Item2")
]

List {
    ForEach(items) { item in
        Text(item.name)
    }
}

动画和效果

1. withAnimation

用于添加动画。

swift 复制代码

@State private var opacity: Double = 1.0

Button("淡入淡出") {
    withAnimation {
        opacity = 0.5
    }
}

Text("文本")
    .opacity(opacity)

2. .animation

为视图添加动画。

swift 复制代码

@State private var isExpanded = false

Button("展开/折叠") {
    isExpanded.toggle()
}

Text("文本")
    .scaleEffect(isExpanded ? 1.5 : 1.0)
    .animation(.easeInOut(duration: 1.0))

其他

1. NavigationLink

用于导航。

swift 复制代码

struct DetailView: View {
    var body: some View {
        Text("详情页")
    }
}

NavigationLink(destination: DetailView()) {
    Text("前往详情页")
}

2. @State

用于状态变量。

swift 复制代码

@State private var counter = 0

Button("点击增加") {
    counter += 1
}

Text("计数器：\(counter)")

3. @Binding

用于绑定变量。

swift 复制代码

struct ChildView: View {
    @Binding var isOn: Bool

    var body: some View {
        Toggle("开关", isOn: $isOn)
    }
}

struct ParentView: View {
    @State private var isOn = false

    var body: some View {
        ChildView(isOn: $isOn)
    }
}

4. API 数据获取

SwiftUI 中获取 API 数据可以使用 URLSession 类。以下是一个简单的例子：

swift 复制代码

import SwiftUI

struct Post: Codable, Identifiable {
    let id = UUID()
    var title: String
    var body: String
}

struct ContentView: View {
    @State private var posts: [Post] = []

    var body: some View {
        List(posts, id: \.id) { post in
            VStack(alignment: .leading) {
                Text(post.title)
                Text(post.body)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
        .onAppear {
            fetchData()
        }
    }

    func fetchData() {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else { return }

        URLSession.shared.dataTask(with: url) { data, response, error in
            if let data = data {
                do {
                    let posts = try JSONDecoder().decode([Post].self, from: data)
                    DispatchQueue.main.async {
                        self.posts = posts
                    }
                } catch {
                    print(error.localizedDescription)
                }
            }
        }.resume()
    }
}

通过这些示例，你可以快速掌握 SwiftUI 的基本用法，并开始构建自己的跨平台应用。SwiftUI 的声明式语法使得代码更加直观和易于维护。