我正在尝试构建一个具有自动完成功能的文本字段。我正在使用 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,
),
],
);
},
);
问。我是不是遗漏了什么或做错了什么?
注意:
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/