面试题：Swift中SwiftUI自定义视图基础

Question

在SwiftUI中，如何创建一个自定义视图，该视图包含一个文本标签和一个按钮，并且当按钮被点击时，文本标签的内容会发生变化？请写出主要的代码结构和关键逻辑。

Answer 1

import SwiftUI

struct CustomView: View {
    @State private var textContent = "初始文本"
    
    var body: some View {
        VStack {
            Text(textContent)
           .padding()
            Button("点击改变文本") {
                textContent = "文本已改变"
            }
           .padding()
        }
    }
}

struct CustomView_Previews: PreviewProvider {
    static var previews: some View {
        CustomView()
    }
}

1. 关键逻辑解析：
   • 使用 @State 来声明一个可变的状态变量 textContent，它用来存储文本标签显示的内容。初始值设为“初始文本”。
   • 在 body 中，构建一个 VStack 垂直堆叠视图，其中包含一个 Text 文本标签显示 textContent 的内容，以及一个 Button 按钮。
   • 按钮的点击动作闭包中，改变 textContent 的值为“文本已改变”，SwiftUI 会自动检测到状态变化并更新视图，从而更新文本标签的显示内容。
   • CustomView_Previews 结构体用于在 Xcode 的预览窗口中展示 CustomView。