面试题：Swift中SwiftUI自定义视图组件的基本结构

Question

请简述在Swift的SwiftUI框架下，自定义一个简单视图组件的基本代码结构和关键步骤，例如创建一个包含文本和按钮的自定义视图。

Answer 1

1. 基本代码结构：
   • 在SwiftUI中，自定义视图是通过创建一个遵循View协议的结构体来实现的。
   • 结构体中通常包含存储视图状态的属性（如果有）。
   • 必须实现一个body属性，该属性返回一个视图树，定义了该自定义视图的外观。
2. 关键步骤：
   • 创建结构体：

struct CustomView: View {
    // 这里可以定义视图的属性
    var body: some View {
        // 视图内容
    }
}

• 添加文本和按钮：

struct CustomView: View {
    var body: some View {
        VStack {
            Text("这是一个自定义视图中的文本")
            Button("按钮") {
                // 按钮点击的逻辑代码
            }
        }
    }
}

• 预览自定义视图：

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

在上述代码中：

• 首先定义了一个CustomView结构体遵循View协议。
• body属性中使用VStack垂直堆叠视图，添加了Text文本和Button按钮。
• Button的闭包部分可以编写按钮点击后的逻辑。
• CustomView_Previews结构体用于在Xcode的预览面板中实时查看CustomView的外观，方便开发和调试。