时间戳

首页 > 解决方案 > Flutter 动态文本字段自动完成

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');
  }
}

标签： flutterdartflutter-provider

解决方案

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

推荐阅读