Flutter 动态文本字段自动完成

Question

我使用库 autocomplete_textfield 创建具有自动完成功能的文本字段。每次更改文本时，我都会请求获取特定的用户列表，然后将它们设置为我的 AutocompleteTextfield 的建议。该列表似乎已更新（当我打印（list.length）时），但在视觉上它不是。有什么想法吗？

我的自动完成文本字段：

AutoCompleteTextField<User>(
  textChanged: (item) async {
    await model.searchRecommendation(item);
  },
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(0)
    ),
    labelText: 'Recommendations', 
    labelStyle: TextStyle(color: AppColors.blackColor)
  ),
  key: autocompleteUserSearchTextFieldKey,
  suggestionsAmount: 3,
  controller: _userSearchController,
  itemSubmitted: (item) {},
  suggestions: model.userRecommendations,
  itemBuilder: (context, suggestion) => new Padding(
    padding: EdgeInsets.all(16),
    child: ListTile(
      title: Text(suggestion.email)
    ),
  ),
  itemSorter: (a, b) => a.email.compareTo(b.email),
  itemFilter: (suggestion, input) => suggestion.email.toLowerCase().startsWith(input.toLowerCase()),
),

我的视图模型：

List<User> userRecommendations = [];

Future searchRecommendation(String filter) async {
  var token = await SharedPreferenceUtils().getStringValue('jwt');
  final response = await _api.filterUserSearch(filter, currentUser, token);
  if (response is SuccessState) {
    List<dynamic> tmp = response.value.payload;
    tmp ??= [];
    userRecommendations = List<User>.from(tmp.map((x) => User.fromJson(x)));
    notifyListeners();
  } else if (response is ErrorState) {
    String error = response.msg;
    print('Error $error');
  } else {
    print('Error');
  }
}

Answer 1

我没有看到您的所有代码，但我认为小部件树没有被重建。您必须将AutoCompleteTextField 与FutureBuilder 或StreamBuilder 包装在一起（取决于您的实现，无论如何StreamBuilder 似乎更适合那里）以听取推荐结果。

您也可以实现StatefulWidget 或使用StatefulBuilder。

StatefulBuilder 的示例（它很脏但应该可以工作，理想情况下你会使用StreamBuilder）：

return StatefulBuilder(
  builder: (context, setState) => AutoCompleteTextField<User>(
    textChanged: (item) async {
      await model.searchRecommendation(item);
      setState(() {});
    },
    decoration: InputDecoration(
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(0)),
        labelText: 'Recommendations',
        labelStyle: TextStyle(color: AppColors.blackColor)),
    key: autocompleteUserSearchTextFieldKey,
    suggestionsAmount: 3,
    controller: _userSearchController,
    itemSubmitted: (item) {},
    suggestions: model.userRecommendations,
    itemBuilder: (context, suggestion) => new Padding(
      padding: EdgeInsets.all(16),
      child: ListTile(title: Text(suggestion.email)),
    ),
    itemSorter: (a, b) => a.email.compareTo(b.email),
    itemFilter: (suggestion, input) => suggestion.email.toLowerCase().startsWith(input.toLowerCase()),
  ),
);

Answer 2

Nvm 我找到了答案！ AutocompleteTextfield 有一个名为 updateSuggestions() 的方法。我只是不得不使用它。