SwiftUI List按section渲染不同类型问卷单元格时预览卡顿问题求助

问题诊断 #

• 编译卡顿、预览卡死的核心原因是Swift编译器的类型推断过载：你把多层条件判断、可选值解包、嵌套ForEach全写在了同一个body属性里，SwiftUI的body是@ViewBuilder构造，编译器需要遍历所有分支的视图类型做合并推断，分支越多、嵌套越深，推断耗时就越长，超过阈值就会编译超时，Xcode也没法输出明确错误。
• 你的需求完全可以在SwiftUI中实现，只需要优化视图结构，降低编译器的推断负担即可。

修复方案 #

核心思路是拆分复杂视图，把不同题型的渲染逻辑抽离成独立子视图，避免主视图body内出现过多嵌套分支：

import SwiftUI

struct Question: Hashable, Codable, Identifiable {
    var id: Int
    var label: String
    var type: Int
    var options: [Option]?
    var date: Date? = nil
}

struct Option : Hashable, Codable, Identifiable {
    var id: Int
    var value: String
}

// 抽离单个题目的渲染逻辑
struct QuestionItemView: View {
    let question: Question
    
    var body: some View {
        switch question.type {
        case 0:
            // 文本输入题可替换成实际业务需要的TextField样式
            TextField("请输入", text: .constant(""))
        case 1:
            // Picker选择题，可替换为实际绑定的选择变量
            Picker("请选择", selection: .constant(0)) {
                if let options = question.options {
                    ForEach(options) { option in
                        Text(option.value).tag(option.id)
                    }
                }
            }
        case 2:
            // 多选全选项展示
            if let options = question.options {
                ForEach(options) { option in
                    // 可替换为带勾选状态的自定义多选单元格
                    Text(option.value)
                }
            }
        default:
            EmptyView()
        }
    }
}

struct MyList: View {
    var questions: [Question] = [
        Question(id: 1, label: "My first question", type: 0),
        Question(id: 2, label: "My other question", type: 1, options: [Option(id: 15, value: "Yes"), Option(id: 22, value: "No")]),
        Question(id: 3, label: "My last question", type: 2, options: [Option(id: 4, value: "Red"), Option(id: 5, value: "Green"), Option(id: 6, value: "Blue")])
    ]
    
    var body: some View {
        List {
            ForEach(questions) { question in
                Section(header: Text(question.label)) {
                    // 直接调用子视图，结构非常简洁
                    QuestionItemView(question: question)
                }
            }
        }
    }
}

struct MyList_Previews: PreviewProvider {
    static var previews: some View {
        MyList()
    }
}

额外优化建议 #

• 可以把题型的type字段从Int改成枚举，避免硬编码数字，可读性和可维护性更高：

enum QuestionType: Int, Codable {
    case textInput = 0
    case singlePicker = 1
    case multiSelect = 2
}
// 对应的Question结构体里把type改成QuestionType类型即可

• 后续如果要加答题状态绑定，可以把绑定变量传入QuestionItemView，不会影响主视图的结构复杂度。

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