flutter - Flutter:自动完成文本字段不适用于自定义数据类型
问题描述
我正在尝试构建一个具有自动完成功能的文本字段。我正在使用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 提到的,
您正在使用autocomplete_textfield吗?我遇到了很多问题,当我切换到flutter_typeahead时这些问题就消失了(更好的文档包)
所以我考虑了他的建议,并开始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
模型)继承。我知道这是可能的,但我是新手,所以仍然无法让它工作!:(
推荐阅读
- arduino - Atmega328 模数转换器
- css - 使用 CSS 和特定宽度定位 Microsoft Edge
- javascript - ng-repeat td 中的输入字段不触发功能
- circuit - How does the performance relate to the voltage in digital electronics?
- node.js - Facebook Messenger bot 错误“意外令牌”在 JSON 中的位置 0
- html - 卡住试图对齐 HTML CSS
- go - 通过 Golang 在 Google Cloud Platform 中使用存储桶
- javascript - 从下拉列表中更改值
- ionic-framework - CheckBox 函数调用带有 IONIC 2 的按钮
- c# - 如何遍历一个excel文件