SwiftUI：循环生成表盘时如何实现switch/case等效逻辑并避免预览超时？

问题背景 #

我有6个表盘，通过ForEach循环批量生成，核心代码如下：

ForEach(stats_Data){stat in
    VStack(spacing: 14){
        HStack{
            Text(stat.title)
                .dialTitleStyle()
        } 
        // 绘制表盘圆环
        ZStack{
            Circle()...
        }
    }
}

表盘弧形的通用渲染代码为：

Circle()
     .trim(from: (stats_Data[stat.id].startData / stat.goal), to: (stats_Data[stat.id].currentData / stat.goal))
     .stroke(stat.color, style: StrokeStyle(lineWidth: 10, lineCap: .round))
     .frame(width: (circleRadius) / 2, height: (circleRadius) / 2)

原本想用switch/case针对每个stat.id单独处理表盘逻辑：

switch stat.id {
      case 0:
            UpdateDial1…
      case 1:
            UpdateDial2…
      case 2:
            UpdateDial3…
      case 3:
            UpdateDial4…
      case 4:
            UpdateDial5…
      default:
            UpdateDial6…
}

但这种写法会导致SwiftUI画布预览无限超时，需要找到更合适的实现方式。

解决方案 #

1. 将每个表盘逻辑封装为独立View #

把差异化的表盘渲染逻辑拆成单独的View，让SwiftUI预览系统能独立处理每个组件，避免卡顿：

// 定义独立的表盘View
struct DialView1: View {
    let stat: StatModel
    let circleRadius: CGFloat
    var body: some View {
        Circle()
            .trim(from: stat.startData / stat.goal, to: stat.currentData / stat.goal)
            .stroke(stat.color, style: StrokeStyle(lineWidth: 12, lineCap: .square))
            .frame(width: circleRadius / 2, height: circleRadius / 2)
    }
}

struct DialView2: View {
    let stat: StatModel
    let circleRadius: CGFloat
    var body: some View {
        Circle()
            .trim(from: stat.startData / stat.goal, to: stat.currentData / stat.goal)
            .stroke(stat.color, style: StrokeStyle(lineWidth: 8, lineCap: .round))
            .frame(width: circleRadius / 2, height: circleRadius / 2)
            .rotationEffect(.degrees(-90))
    }
}

// 依次实现DialView3~DialView6...

在循环中调用对应View：

ForEach(stats_Data){stat in
    VStack(spacing: 14){
        HStack{
            Text(stat.title)
                .dialTitleStyle()
        } 
        ZStack{
            switch stat.id {
            case 0: DialView1(stat: stat, circleRadius: circleRadius)
            case 1: DialView2(stat: stat, circleRadius: circleRadius)
            case 2: DialView3(stat: stat, circleRadius: circleRadius)
            case 3: DialView4(stat: stat, circleRadius: circleRadius)
            case 4: DialView5(stat: stat, circleRadius: circleRadius)
            default: DialView6(stat: stat, circleRadius: circleRadius)
            }
        }
    }
}

2. 用枚举封装差异化配置 #

如果只是样式或计算逻辑不同，可给StatModel添加枚举字段，把差异化配置封装进去，避免在View层级写大量switch：

// 定义枚举封装表盘配置
enum DialConfig {
    case type1, type2, type3, type4, type5, type6
    
    var strokeStyle: StrokeStyle {
        switch self {
        case .type1: return StrokeStyle(lineWidth: 12, lineCap: .square)
        case .type2: return StrokeStyle(lineWidth: 8, lineCap: .round)
        default: return StrokeStyle(lineWidth: 10, lineCap: .round)
        }
    }
    
    func trimRange(for stat: StatModel) -> (from: Double, to: Double) {
        switch self {
        case .type1: return (from: stat.currentData/stat.goal, to: stat.startData/stat.goal)
        default: return (from: stat.startData/stat.goal, to: stat.currentData/stat.goal)
        }
    }
}

// 更新数据模型
struct StatModel: Identifiable {
    let id: Int
    let title: String
    let color: Color
    let startData, currentData, goal: Double
    let config: DialConfig // 新增配置字段
}

在View中直接调用配置：

ForEach(stats_Data){stat in
    VStack(spacing: 14){
        HStack{
            Text(stat.title)
                .dialTitleStyle()
        } 
        ZStack{
            Circle()
                .trim(from: stat.config.trimRange(for: stat).from, 
                      to: stat.config.trimRange(for: stat).to)
                .stroke(stat.color, style: stat.config.strokeStyle)
                .frame(width: circleRadius / 2, height: circleRadius / 2)
        }
    }
}

3. 使用@ViewBuilder封装差异化内容 #

如果仅部分内容差异化，用@ViewBuilder创建专门方法处理switch，代码更简洁且预览正常：

struct DashboardView: View {
    let stats_Data: [StatModel]
    let circleRadius: CGFloat
    
    var body: some View {
        ForEach(stats_Data){stat in
            VStack(spacing: 14){
                HStack{
                    Text(stat.title)
                        .dialTitleStyle()
                } 
                ZStack{
                    buildDial(for: stat)
                }
            }
        }
    }
    
    @ViewBuilder
    private func buildDial(for stat: StatModel) -> some View {
        switch stat.id {
        case 0:
            Circle()
                .trim(from: stat.startData/stat.goal, to: stat.currentData/stat.goal)
                .stroke(stat.color, style: StrokeStyle(lineWidth: 12, lineCap: .square))
                .frame(width: circleRadius/2, height: circleRadius/2)
        case 1:
            Circle()
                .trim(from: stat.startData/stat.goal, to: stat.currentData/stat.goal)
                .stroke(stat.color, style: StrokeStyle(lineWidth: 8, lineCap: .round))
                .frame(width: circleRadius/2, height: circleRadius/2)
                .rotationEffect(.degrees(-90))
        // 其他case逻辑
        default:
            Circle()
                .trim(from: stat.startData/stat.goal, to: stat.currentData/stat.goal)
                .stroke(stat.color, style: StrokeStyle(lineWidth: 10, lineCap: .round))
                .frame(width: circleRadius/2, height: circleRadius/2)
        }
    }
}

内容的提问来源于stack exchange，提问作者Edward Hasted