SwiftUI如何实现Picker同时选择分类与子分类并展示名称

第一步：修正原代码的语法错误 #

原代码存在几处语法问题，先修正：

• 属性名遵循Swift小驼峰命名：SubCategory改为subCategories
• 修正字符串引号错误：['Utility Bill", "Telephone Bill"]改为["Utility Bill", "Telephone Bill"]
• 修正拼写错误：dategories改为categories，ScategoryList改为$categoryList

第二步：实现联动选择功能 #

要同时选择分类和子分类，需要新增状态变量保存选中的分类和子分类，再通过联动Picker实现选择，最后组合显示名称。

完整代码如下：

import SwiftUI

struct Category: Identifiable {
    let id = UUID()
    let title: String 
    let subCategories: [String]? // 修正命名和可选类型
}

struct SelectionList: View {
    // 新增状态变量：保存选中的分类和子分类
    @State private var selectedCategory: Category?
    @State private var selectedSubCategory: String?
    
    let categories = [
        Category(title: "Food", subCategories: ["Lunch", "Dinner"]),
        Category(title: "Bills", subCategories: ["Utility Bill", "Telephone Bill"])
    ]
    
    // 组合显示的文本
    var displayText: String {
        guard let category = selectedCategory, let subCat = selectedSubCategory else {
            return "请选择分类和子分类"
        }
        return "\(category.title): \(subCat)"
    }
    
    var body: some View {
        VStack {
            // 显示组合后的名称
            Text(displayText)
                .font(.title)
                .padding()
            
            Form {
                // 分类选择Picker
                Picker("选择分类", selection: $selectedCategory) {
                    Text("请选择分类").tag(nil as Category?)
                    ForEach(categories) { category in
                        Text(category.title).tag(category as Category?)
                    }
                }
                
                // 子分类选择Picker：仅当选中分类且有子分类时显示
                if let selectedCategory = selectedCategory, let subCats = selectedCategory.subCategories {
                    Picker("选择子分类", selection: $selectedSubCategory) {
                        Text("请选择子分类").tag(nil as String?)
                        ForEach(subCats, id: \.self) { subCat in
                            Text(subCat).tag(subCat as String?)
                        }
                    }
                }
            }
        }
    }
}

// 预览
struct SelectionList_Previews: PreviewProvider {
    static var previews: some View {
        SelectionList()
    }
}

关键实现说明 #

• 状态变量：selectedCategory保存选中的分类对象，selectedSubCategory保存选中的子分类字符串，通过这两个变量联动控制Picker的显示。
• 联动逻辑：子分类Picker仅在选中分类且该分类有子分类时才会显示，实现动态联动。
• 组合文本：通过计算属性displayText，根据选中的分类和子分类生成类似Food: Dinner的格式，未选中时显示提示文本。

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