Flutter 颤振：自动完成文本字段不使用自定义数据类型

我正在尝试构建一个具有自动完成功能的文本字段。我用的是软件包

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

我使用

fromMap

和

toMap

方法创建了用户模型类。有一个函数可以从数据库中检索用户并返回用户列表

list

以下是构建自动完成字段的代码：

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,
          ),
        ],
      );
    },
  );

AutoCompleteTextField searchTextField=AutoCompleteTextField(
钥匙：钥匙，
clearOnSubmit:false，
建议：用户：，
样式：TextStyle（颜色：Colors.black，fontSize:16.0），
装饰：输入装饰(
contentPadding:EdgeInsets.fromLTRB（10.0,30.0,10.0,20.0），
hintText:“搜索名称”，
hintStyle:TextStyle（颜色：Colors.black），
),
itemFilter：（项目，查询）{
return item.name.toLowerCase（）.startsWith（query.toLowerCase（））；
},
物品分拣员：（a、b）{
返回a.name.compareTo（b.name）；
},
已提交项目：（项目）{
设置状态（）{
searchTextField.textField.controller.text=item.name；
});
},
itemBuilder：（上下文，项）{
返回行(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
正文(
item.name，
),
],
);
},
);

Q.我是错过了什么还是做错了什么

注意：

users

对象具有格式正确的用户列表，我已打印以验证这一点

正如@pskink所提到的

你在用什么？我有很多问题，当我切换到（更好的文档包）时，这些问题就消失了

因此，我考虑了他的建议，转而使用

flatter\u typeahead

package

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

final TextEditingController\u typeAheadController=TextEditingController（）；
列出用户列表；
//查找并创建匹配字符串的列表
列表\u获取建议（字符串查询）{
列表匹配项=列表（）；
matches.addAll（usersList）；
matches.retainWhere（（s）=>s.toLowerCase（）.contains（query.toLowerCase（））；
返回比赛；
}
//从数据库中获取用户列表
void\u getUsersList（）异步{
usersList=等待databaseHelper.getUsersList（）；
}
//上面的代码是在类中定义的，在build方法之前
//构建文本字段
TypeAheadFormField(
textFieldConfiguration:textFieldConfiguration(
控制器：_-typeAheadController，
装饰：输入装饰（标签文本：“选择用户”），
suggestionsCallback：（模式）{
返回建议（模式）；
},
itemBuilder：（上下文、建议）{
返回列表块(
标题：文本（建议），
);
},
transitionBuilder:（上下文、建议框、控制器）{
返回建议框；
},
onSuggestionSelected:（建议）{
_typeAheadController.text=建议；
},
验证程序：（val）=>val.isEmpty
？“请选择一个用户…”
：null，
onSaved：（val）=>setState（（）=>_name=val），
),
//函数，该函数从db中提取数据并创建一个在db类中定义的列表
//不直接相关，但可能有帮助
未来的getUsersList（）异步{
Database db=wait instance.Database；
最终用户数据=等待数据库查询（“用户”）；
返回usersData.map（（映射行）{
以字符串形式返回行[“名称”]；
}).toList（）；
}

---

PS:关于

autocomplete\u textfield

我错过的一件事是我们可以传递多个参数的方式，因为我们可以从我们自己的自定义模型继承，例如

user

model。我知道这是可能的，但我是新手，所以仍然无法让它工作！：（

我也遇到了同样的问题，解决方案是放置一个bool并显示一个CircularProgressIndicator，直到加载列表中的所有数据，从而呈现AutoCompleteTextField

例：

_卸载
？循环压缩机指示器（）
：searchTextField=AutoCompleteTextField（此处为您的组件）

你的问题是……？

“我是错过了什么还是做错了？”

实际上说的不多，它会崩溃吗？如果是这样，发布stacktrace，如果不是，什么不起作用？它不会崩溃，也不会显示预期的结果。大约有5个用户的起始字母

A

，当我键入

A

时，它会显示以

A

开头的用户列表，但它不会显示任何内容。And控制台中没有任何错误。但是，当我键入一些内容并点击字段外部时，它会显示此错误

W/IInputConnectionWrapper（5489）：getCursorCapsMode on inactive InputConnection异常被手势捕获方法“where”在null上调用。接收器：null尝试调用：where（Closure:（Users）=>bool）

您正在使用？我有很多问题，当我切换到（更好的文档包）时，这些问题就消失了。谢谢，我会使用它。1.如何从项目中完全删除包？（想删除

自动完成\u textfield

包）2.如何在末尾获取城镇名称？1.将其从

pubspec.yaml

文件中删除，2.数据取自sqflite？您不需要

getUsersList（）

方法-只需更改

\u getSuggestions（字符串模式）

即可返回

db.query（“用户”，其中：“name like%？%”，wherergs:[模式]）

-非常感谢您的建议，但它不起作用。我尝试了

返回等待db.query（'users'，其中：“name LIKE%？%”，wherergs:[pattern]）

并且它抛出了

数据库异常

，所以我切换到

返回等待db.rawQuery（“从name LIKE“%$pattern%”的用户中选择*））

但现在它抛出了

错误：类型“Future”不是类型“FutureOr”的子类型

。我还试图将

\u getSuggestions

定义为

FutureOr

，但它抛出了不同的错误：

类型“QueryRow”不是类型“String”的子类型。

@pskink我注意到

类型先行

。如果我定义initial像这样的值

\u typeAheadCon