SwiftUI自定义搜索栏筛选A-Z分区List时列表不更新问题

问题场景 #

使用TextField实现自定义搜索栏，对按A-Z首字母分区展示的词汇表List做搜索过滤。列表按首字母划分为A到Z的独立Section分区，初始实现无法同时正确过滤分区和列表项，搜索返回结果为空。

初始实现代码 #

@State private var searchText = ""
let lists = loadGlossary().keys.sorted()
let glossary = loadGlossary()

var body: some View {
        
    VStack(spacing: -10) {
        
        //导航栏
        NavigationBarView(title: "Glossary", action: {}, titleColor: .primary, closeColor: .primary.opacity(0.5))
            .padding()
        
        //搜索栏
        TextField("Search", text: $searchText)
            .padding()
            .frame(height: 45)
            .background(.gray.opacity(0.1))
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .padding()
            .overlay {
                HStack {
                    Spacer()
                    Button {
                        searchText = ""
                    } label: {
                        Label("clear", systemImage: "xmark.circle.fill")
                            .foregroundColor(.gray)
                            .opacity(searchText.isEmpty ? 0 : 1)
                            .padding(30)
                    }
                    .labelStyle(.iconOnly)
                }
            }
        
        //列表
        List {
            ForEach(Array(wordDict.keys).sorted(by: <), id: \.self) { character in
                ///首字母分区
                Section(header: Text("\(character)").font(Font.system(size:18, weight: .bold, design: .serif)).foregroundColor(.primary)) {
                    ///词汇项
                    ForEach(wordDict[character] ?? [""], id: \.self) { word in
                        VStack(alignment: .leading, spacing: 5) {
                            Text(word)
                                .font(.system(size: 17, weight: .bold, design: .serif))
                            Divider()
                            Text(getDescription(word))
                                .foregroundColor(.secondary)
                        }
                    }
                    .padding()
                }
            }
            .listRowSeparator(.hidden)
        }
        .listStyle(.plain)
        .padding(.top)
    }
}

调整后遇到的异常 #

初次调整时新增了首字母分组逻辑，通过.onAppear加载全量初始数据，同时给搜索框加输入监听触发过滤：

分组加载逻辑 #

@State private var wordDict: [String:[String]] = [:]

func loadData() -> [String:[String]] {
    let letters = Set(lists.compactMap( { $0.first } ))
    var dict: [String:[String]] = [:]
    for letter in letters {
        dict[String(letter)] = lists.filter( { $0.first == letter } ).sorted()
    }
    return dict
}

初始数据加载 #

.onAppear {
    wordDict = loadData()
}

搜索监听逻辑 #

TextField("Search", text: $searchText)
    .onChange(of: searchText) {
        wordDict = getFilteredWords(query: $0)
    }

该版本存在明确异常：退格删除搜索内容、清空输入框时，List无法同步更新刷新。

问题根源 #

• 用同一个wordDict变量同时存储全量原始数据和过滤结果，过滤操作会覆盖原始数据，搜索词清空时没有完整数据源可以恢复全量列表
• 手动监听输入事件赋值的方式，在搜索词为空的边界场景下容易出现状态更新不同步，SwiftUI的状态追踪机制没有被充分利用

正确实现方案 #

• 独立存储全量原始词汇数据，全程不修改原始数据源
• 用计算属性实时返回当前搜索词对应的过滤+分组结果，由SwiftUI自动追踪searchText的变化触发UI刷新，不需要手动监听输入事件
• 搜索词为空时直接返回全量分组结果，自动剔除无匹配项的空分区

核心实现代码：

// 全量原始数据，页面初始化时加载一次即可，不做修改
let fullWordList = loadGlossary().keys.sorted()
@State private var searchText = ""

// 自动计算过滤后的分组结果
var filteredWordDict: [String:[String]] {
    let query = searchText.trimmingCharacters(in: .whitespaces)
    // 搜索词为空直接返回全量分组
    guard !query.isEmpty else {
        let letters = Set(fullWordList.compactMap { $0.first })
        var fullGroupedDict: [String:[String]] = [:]
        for letter in letters {
            fullGroupedDict[String(letter)] = fullWordList.filter { $0.first == letter }.sorted()
        }
        return fullGroupedDict
    }

    // 先过滤匹配词汇，再做首字母分组
    let matchedWords = fullWordList.filter { $0.localizedCaseInsensitiveContains(query) }
    let letters = Set(matchedWords.compactMap { $0.first })
    var filteredGroupedDict: [String:[String]] = [:]
    for letter in letters {
        filteredGroupedDict[String(letter)] = matchedWords.filter { $0.first == letter }.sorted()
    }
    return filteredGroupedDict
}

将原有List组件内的数据源从wordDict替换为filteredWordDict，删除之前的.onChange搜索监听、.onAppear手动加载分组的逻辑即可。

补充：使用localizedCaseInsensitiveContains做匹配可实现不区分大小写的搜索，适配多语言场景。

内容的提问来源于stack exchange，提问作者Mc.Lover