Flutter:自动完成文本字段不适用于自定义数据类型

标签 flutter dart autocomplete autocompletetextview

我正在尝试构建一个具有自动完成功能的文本字段。我正在使用 AutoComplete TextField包裹。

我有带 fromMap 的用户模型类和 toMap方法。有从数据库中检索用户并返回用户列表的函数 List<Users> .

这是构建自动完成字段的代码:

AutoCompleteTextField searchTextField = AutoCompleteTextField<Users>(
    key: key,
    clearOnSubmit: false,
    suggestions: users,
    style: TextStyle(color: Colors.black, fontSize: 16.0),
    decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
      hintText: "Search Name",
      hintStyle: TextStyle(color: Colors.black),
    ),
    itemFilter: (item, query) {
      return item.name.toLowerCase().startsWith(query.toLowerCase());
    },
    itemSorter: (a, b) {
      return a.name.compareTo(b.name);
    },
    itemSubmitted: (item) {
      setState(() {
        searchTextField.textField.controller.text = item.name;
      });
    },
    itemBuilder: (context, item) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            item.name,
          ),
        ],
      );
    },
  );

问。我是不是遗漏了什么或做错了什么?

注意:

  1. users对象具有格式正确的用户列表,我已打印以验证这一点。

最佳答案

正如@pskink 提到的,

you are using autocomplete_textfield? i had a lot of problems with it, that disappeared when i switched to flutter_typeahead (much better documented package)

所以我考虑了他的建议,并移动到 flutter_typeahead 包。

final TextEditingController _typeAheadController = TextEditingController();

List<String> usersList;

//find and create list of matched strings
List<String> _getSuggestions(String query) {
    List<String> matches = List();

    matches.addAll(usersList);

    matches.retainWhere((s) => s.toLowerCase().contains(query.toLowerCase()));
    return matches;
}

//gets user list from db
void _getUsersList() async {
    usersList = await databaseHelper.getUsersList();
}


//the above code is defined in the class, before build method


//builds the text field
TypeAheadFormField(
  textFieldConfiguration: TextFieldConfiguration(
      controller: _typeAheadController,
      decoration: InputDecoration(labelText: 'Select a User'),
  suggestionsCallback: (pattern) {
    return _getSuggestions(pattern);
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      title: Text(suggestion),
    );
  },
  transitionBuilder: (context, suggestionsBox, controller) {
    return suggestionsBox;
  },
  onSuggestionSelected: (suggestion) {
    _typeAheadController.text = suggestion;

  },
  validator: (val) => val.isEmpty
      ? 'Please select a user...'
      : null,
  onSaved: (val) => setState(() => _name = val),
),



//function that pulls data from db and create a list, defined in db class
//not directly relevant but it may help someone
Future<List<String>> getUsersList() async {
    Database db = await instance.database;

    final usersData = await db.query("users");

    return usersData.map((Map<String, dynamic> row) {
      return row["name"] as String;
    }).toList();
}

PS:关于 autocomplete_textfield 我怀念的一件事是我们可以传递多个参数的方式,因为我们可以从我们自己的自定义模型继承,例如 user模型。我知道这是可能的,但我是新手,所以仍然无法让它发挥作用! :(

关于Flutter:自动完成文本字段不适用于自定义数据类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58091330/

相关文章:

list - flutter 开关按钮未更新

android - Dart Flutter "Non-nullable instance field ' _isSigningIn' 必须初始化。”错误

flutter - 创建表语句中的SQLite语法错误-Flutter/Dart

data-binding - core-list-dart 模板如何绑定(bind)到模型本身

jsf - 在自动完成多选 PrimeFaces 中调用删除项目事件

javascript - Reactjs - 通过在自动完成组件( Material UI)中的每个输入更改上点击 API 来更新选项

flutter - 一段时间后,我想用android_alarm_manager插件在后台关闭audio_service

flutter - dart和Object.methodName()之间的区别

flutter - 如何在GestureDetector中从其子项中捕捉手势?

javascript - jQuery UI 自动完成在搜索前显示结果