Flutter 动态文本字段自动补全

如何解决Flutter 动态文本字段自动补全

我使用库 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');
  }
}

解决方法

我没有看到您的所有代码，但我认为小部件树没有被重建。您必须用 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()),);

,

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