SwiftUI 基础：实现一个简单的计数器

题目

SwiftUI 基础：实现一个简单的计数器

信息

• 类型：问答
• 难度：⭐

考点

状态管理（@State）, 视图布局（VStack）, 按钮事件处理

快速回答

实现一个包含计数文本和增加按钮的计数器：

• 使用 @State 管理计数状态
• 用 VStack 垂直排列视图
• 通过 Button 的 action 参数实现计数增加
• 用 Text 显示当前计数值

原理说明

SwiftUI 是声明式 UI 框架，核心是状态驱动视图更新：

• @State：属性包装器，管理视图私有状态。当值改变时自动触发视图重建
• 视图更新机制：状态变化 → 比较视图树差异 → 高效更新渲染
• 布局系统：VStack 按垂直方向排列子视图

代码示例

import SwiftUI

struct CounterView: View {
    // 1. 声明状态变量
    @State private var count = 0

    var body: some View {
        // 2. 垂直布局
        VStack(spacing: 20) {
            // 3. 显示计数
            Text("Count: \(count)")
                .font(.title)

            // 4. 按钮操作
            Button("Increment") {
                // 5. 修改状态（触发UI更新）
                count += 1
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
    }
}

最佳实践

• 将 @State 变量标记为 private，限制为当前视图内部使用
• 使用间距参数（如 VStack(spacing:20)）提升布局可读性
• 为按钮添加视觉修饰（背景色/圆角）增强用户体验

常见错误

• 错误1：直接修改非状态变量（不会触发UI更新）
  var count = 0 ❌ 缺少 @State
• 错误2：在按钮外部修改状态（违反声明式原则）
  Button("Increment") { } count += 1 ❌ 逻辑位置错误
• 错误3：忘记状态私有化导致外部误操作
  @State var count = 0 ❌ 缺少 private

扩展知识

• 状态生命周期：@State 值保存在视图之外，视图重建时保留值
• 布局替代方案：HStack（水平排列）、ZStack（重叠排列）
• 进阶状态管理：当需要跨视图共享状态时，升级为 @Observable 或 @EnvironmentObject
• 动画支持：添加 .animation(.default) 修饰器可实现平滑数值变化效果