实现一个点击按钮切换文本内容的SwiftUI视图

题目

实现一个点击按钮切换文本内容的SwiftUI视图

信息

• 类型：问答
• 难度：⭐

考点

SwiftUI视图结构, @State属性包装器, 按钮事件处理

快速回答

实现步骤：

1. 使用@State声明控制文本的状态变量
2. 创建Button并绑定action闭包修改状态
3. 在视图体中组合Text和Button组件

核心代码：

@State private var displayText = "Hello"
Button("Toggle") { displayText = "World" }

原理说明

SwiftUI采用声明式语法，通过@State属性包装器管理视图内部状态。当状态值改变时，SwiftUI自动更新依赖该状态的视图部分。按钮通过闭包触发状态变更，驱动UI刷新。

完整实现代码

import SwiftUI

struct ContentView: View {
    // 1. 声明状态变量
    @State private var displayText = "Hello"

    var body: some View {
        VStack {
            // 2. 显示状态依赖的文本
            Text(displayText)
                .font(.title)
                .padding()

            // 3. 创建触发状态变更的按钮
            Button("切换文本") {
                // 4. 修改状态触发视图更新
                displayText = (displayText == "Hello") ? "World" : "Hello"
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
    }
}

最佳实践

• 状态命名：使用private限制状态作用域，命名需明确（如displayText而非text）
• 视图拆分：复杂视图应拆分成小组件
• 修饰符顺序：修饰符顺序影响渲染效果（如先padding再background）

常见错误

• 错误1：直接修改状态（正确方式：在Button闭包或主线程中修改）
• 错误2：忘记@State导致视图不更新
• 错误3：在视图体内修改状态（应仅在用户操作或异步回调中修改）

扩展知识

• 状态生命周期：@State值由SwiftUI管理，当视图销毁时自动释放
• 状态绑定：使用$前缀（如$displayText）创建双向绑定
• 性能优化：简单状态用@State，复杂数据模型用@ObservableObject