Flutter Web中Searchfield输入文本后无法稳定过滤建议结果

核心问题原因 #

同时设置了suggestions和onSearchTextChanged属性，组件状态更新时，初始的suggestions会覆盖onSearchTextChanged返回的过滤结果，导致过滤内容短暂显示后变回完整列表。

解决方案 #

1. 移除suggestions属性：完全交由onSearchTextChanged控制所有建议项的展示逻辑，包括空查询时返回完整列表。
2. 确保数据源稳定：避免在build方法中重新生成partyListDoc，建议在initState中初始化，防止不必要的组件重建触发列表重置。

修改后的代码示例 #

Padding(
    padding: const EdgeInsets.only(bottom: 10),
    child: SearchField<Map<String, dynamic>>(
        onSearchTextChanged: (query) {
            // 空查询时返回完整列表
            if (query.isEmpty) {
                return partyListDoc.map((party) =>
                    SearchFieldListItem<Map<String, dynamic>>(
                        party['partyName'],
                        item: party,
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                                Text(party['partyName']),
                                Text(party['currentBalance'].toString()),
                            ],
                        ),
                    )).toList();
            }
            // 执行过滤逻辑
            final filter = partyListDoc
                .where((element) =>
                    element['partyName'].toLowerCase()
                       .contains(query.toLowerCase()))
                                      .toList();
            return filter.map((party) =>
                SearchFieldListItem<Map<String, dynamic>>(
                    party['partyName'],
                    item: party,
                    child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                                Text(party['partyName']),
                                Text(party['currentBalance'].toString()),
                            ],
                        ),
                    ))
                    .toList();
            },
        suggestionState: Suggestion.expand,
        textInputAction: TextInputAction.next,
        hint: 'Search by Party Name',
        validator: (x) {
            if (x == null || x.isEmpty) {
                return 'Please enter a party name';
            }
            return null;
        },
        maxSuggestionsInViewPort: 6,
        itemHeight: 50,
        onSuggestionTap: (SearchFieldListItem<Map<String, dynamic>> suggestion) {
           setState(() {
               selectedPartyId = suggestion.item!['partyId'];
           });
           focus.unfocus();
       },
       focusNode: focus,
   )
),

额外优化：稳定数据源初始化 #

在State类中初始化partyListDoc，避免每次build重新生成：

late List<Map<String, dynamic>> partyListDoc;

@override
void initState() {
  super.initState();
  // 从你的数据源加载合作方数据
  partyListDoc = yourDataSource.loadPartyData();
}

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