面试题：SwiftUI自定义视图组件的数据绑定与交互

Question

在Swift的SwiftUI中，假设有一个自定义视图组件，该组件内部有一个文本显示区域和一个按钮。当点击按钮时，需要改变文本显示的内容。请详细说明如何通过数据绑定和交互逻辑来实现这一功能，包括如何定义状态变量以及使用何种修饰符。

Answer 1

1. 定义状态变量：
   • 在SwiftUI中，使用@State属性包装器来定义视图内部的可变状态。例如：

   struct ContentView: View {
       @State private var textToShow = "初始文本"
       var body: some View {
           VStack {
               Text(textToShow)
               Button("点击改变文本") {
                   textToShow = "新的文本"
               }
           }
       }
   }
   

   • 这里@State声明了textToShow变量，该变量用于存储文本显示区域的内容，并且@State会让SwiftUI追踪这个变量的变化，当变量值改变时，SwiftUI会自动重绘相关视图。
2. 按钮交互逻辑：
   • 在Button的闭包中，直接修改@State修饰的状态变量。如上述代码中，当按钮被点击时，textToShow的值从“初始文本”变为“新的文本”。
3. 文本视图的数据绑定：
   • Text视图直接显示@State修饰的变量textToShow。因为textToShow是@State类型，所以当它的值改变时，Text视图会自动更新显示内容。
4. 修饰符：
   • 对于Text视图，可能会用到如font（设置字体）、foregroundColor（设置文本颜色）等修饰符来美化文本显示。例如：

   Text(textToShow)
      .font(.title)
      .foregroundColor(.blue)
   

   • 对于Button视图，常见的修饰符有padding（设置内边距）、background（设置背景颜色）等。例如：

   Button("点击改变文本") {
       textToShow = "新的文本"
   }
   

.padding() .background(Color.green) .foregroundColor(.white)

通过上述步骤，就可以在SwiftUI的自定义视图组件中实现点击按钮改变文本显示内容的功能。