深入解析SwiftUI中的声明式用户界面 - 控件与视图#

iOS

2023-12-05 18:50:12

揭秘 SwiftUI 中的控件和视图：构建交互式界面的指南

控件：用户交互的基础

控件是 SwiftUI 中用户与界面交互的必备元素。从按钮到文本字段，从选择器到开关，控件种类繁多，每个控件都是一个微型程序，等待用户操作，触发相应事件。

视图：界面的构建块

视图是 SwiftUI 中构建用户界面的基石。它们可以是控件、文本、图像，甚至是其他视图的组合。视图通过层次结构组织，形成应用程序的界面。视图对用户交互做出响应，如点击和滚动，并相应地更新界面。

实战：构建交互式计数器

为了加深你对控件和视图的理解，让我们创建一个简单的交互式计数器。它包含一个文本字段，显示计数器值，以及两个按钮，用于增加或减少计数器值。

代码示例：

import SwiftUI

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("\(count)")
                .font(.largeTitle)
                .padding()

            HStack {
                Button(action: { count += 1 }) {
                    Text("+")
                        .font(.title)
                        .padding()
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }

                Button(action: { count -= 1 }) {
                    Text("-")
                        .font(.title)
                        .padding()
                        .background(Color.red)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

步骤详解：

定义数据模型：@State private var count = 0，定义一个名为“count”的私有状态变量，用于存储计数器值。
构建 UI 视图：VStack，用于容纳文本和按钮的垂直排列容器视图；Text("\(count)")，显示计数器值的文本视图；HStack，用于容纳按钮的水平排列容器视图；Button，当点击时会增加或减少计数器值的按钮视图。
配置按钮样式：使用.font(.title)和.padding()设置按钮的字体和内边距；使用.background(Color.green)和.foregroundColor(.white)设置按钮的背景颜色和文本颜色；使用.cornerRadius(10)设置按钮的圆角。
构建应用程序：@main struct MyApp: App，定义应用程序的入口点；var body: some Scene，定义应用程序的场景；WindowGroup { ContentView() }，在窗口中显示 ContentView 视图。