面试题：SwiftUI自定义基础组件并优化其布局性能

设计思路

数据模型：
- 首先定义一个数据结构来表示图表的数据。例如，对于柱状图，可以定义一个结构体 BarData，包含柱体的值、标签等信息。
```
struct BarData {
    let value: Double
    let label: String
}
```
交互逻辑：
- 确定用户操作及其反馈。比如，用户点击柱体时，显示详细信息。这可以通过 @State 变量来跟踪点击状态。
```
struct ChartView: View {
    @State private var selectedIndex: Int? = nil
    let data: [BarData]
    // 其他视图代码
}
```

视图构建：

根据数据和交互逻辑构建图表视图。使用 ForEach 遍历数据数组，绘制每个图表元素。

ForEach(0..<data.count) { index in
    Button(action: {
        self.selectedIndex = self.selectedIndex == index? nil : index
    }) {
        // 绘制柱体
        Rectangle()
          .fill(self.selectedIndex == index? Color.blue : Color.gray)
          .frame(width: 30, height: CGFloat(data[index].value * 10))
        // 绘制标签
        Text(data[index].label)
    }
}

融入SwiftUI布局体系

遵循视图协议：
- 自定义组件需遵循 View 协议，这样它就能像其他 SwiftUI 视图一样被组合和使用。
```
struct ChartView: View {
    // 视图定义和实现
}
```
布局方式：
- 可以使用 SwiftUI 的各种布局容器，如 HStack、VStack、ZStack 等对图表组件进行布局。例如，将图表放在 VStack 中，并在上方添加标题。
```
VStack {
    Text("My Chart")
      .font(.title)
    ChartView(data: myData)
}
```

布局性能优化

减少不必要重绘：
- 使用 @State 和 @Binding 谨慎地标记可变状态，确保只有相关状态变化时才触发重绘。例如，对于图表数据，如果只有部分数据更新，应避免整个图表重绘。可以通过将数据结构拆分成更小的部分，并且只对变化的部分使用 @State。
```
struct ChartSubView: View {
    @Binding var subData: BarData
    // 视图代码
}
```
视图复用：
- 在 ForEach 中使用 id 参数来标识每个子视图，使 SwiftUI 能够复用视图而不是重新创建。
```
ForEach(data, id: \.self) { item in
    // 视图代码
}
```

异步加载数据：

如果图表数据是从网络或其他耗时操作获取，使用异步加载，避免阻塞主线程。可以使用 Task 和 async/await。

@State private var loadedData: [BarData] = []
var body: some View {
    VStack {
        if loadedData.isEmpty {
            ProgressView()
        } else {
            ChartView(data: loadedData)
        }
    }
  .task {
        let newData = await fetchChartData()
        self.loadedData = newData
    }
}
func fetchChartData() async -> [BarData] {
    // 模拟异步数据获取
    await Task.sleep(seconds: 2)
    return [BarData(value: 50, label: "A"), BarData(value: 30, label: "B")]
}

缓存绘制结果：
- 对于复杂的图表绘制，如果某些部分在不同状态下保持不变，可以缓存这些绘制结果。例如，图表的坐标轴和背景样式通常不需要每次都重新绘制。可以创建一个单独的视图来绘制这些静态部分，并缓存其结果。
```
struct ChartBackground: View {
    // 绘制坐标轴等静态部分
}
struct ChartView: View {
    let data: [BarData]
    var body: some View {
        ZStack {
            ChartBackground()
            // 动态图表元素绘制
        }
    }
}
```

面试题：SwiftUI自定义基础组件并优化其布局性能

知识考点

面试题答案

设计思路

融入SwiftUI布局体系

布局性能优化