Flutter:包含来自数据库的动态内容的搜索栏

Question

我目前正在开发一个扑动应用程序。对于组系统，我需要创建组并向其中添加成员。我希望创建组的用户在搜索字段中输入他要添加的用户的名称。然后查看用户帐户是否存在。整个过程应该是动态的。在输入名称时，结果应该会改变。你可以把它想象成在Instagram或Facebook上搜索用户。

最好的方法是什么?我应该使用哪些小部件，我是否必须从数据库中获取所有注册用户，因为在我看来这不是很高效。

谢谢你的回答!

编辑1:回复@LacticWhale

我设法从数据库中获得模型对象列表中的所有用户。所以我已经剪掉了名字和姓氏来传递这个列表给UserSearchView类。但是，当我想加载小部件时，它不起作用，因为一些断言失败了。下面是我的代码:

UserSearchView类:

import 'package:flutter/material.dart';
class UserController extends ChangeNotifier {
UserController({
this.name = '',
});
String name;
void changeName(String newName) {
name = newName;
notifyListeners();
}
}
class UserSearchView extends StatefulWidget {
const UserSearchView({
required this.controller,
required this.users,
super.key,
});
final UserController controller;
final List<String> users;
@override
State<StatefulWidget> createState() => _UserSearchViewState();
}
class _UserSearchViewState extends State<UserSearchView> {
String _name = '';
@override
void initState() {
widget.controller.addListener(() {
setState(() {
_name = widget.controller.name;
});
});
super.initState();
}
@override
void dispose() {
widget.controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => ListView.builder(
itemBuilder: (context, index) => Text(widget.users
.where((element) => element.contains(_name))
.elementAt(index)),
itemCount:
widget.users.where((element) => element.contains(_name)).length,
);
}

UI-Page(部分):

TableRow(
children: [
TextFormField(
controller: textController,
onChanged: (value) => userController.changeName(value),
decoration: InputDecoration(
hintText: "Suchen",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4)),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).dividerColor),
),
prefixIcon: const Icon(Icons.person),
suffixIcon: IconButton(
icon: const Icon(Icons.clear),
onPressed: () {
textController.text = '';
userController.changeName(textController.text);
},
)),
),
],
),
TableRow(
children: [
UserSearchView(
controller: userController,
users: getUserNames(userList),
),
],
),

getUserNames功能:

List<String> getUserNames(List<User> userList) {
List<String> userNames = List.empty();
for (var user in userList) {
userNames.add("${user.firstName} ${user.lastName}");
}
return userNames;
}

Answer 1

从数据库中获取所有用户

用搜索过的用户(MySearchView)创建有状态的小部件。

创建域为name(String，默认为"?")的控制器(扩展ChangeNotifier)，添加方法newName，并将新的newName赋给name，调用方法notifyListner

在MySearchView with fields controller (your controller)

创建状态(_MySearchViewState)覆盖initState添加监听器到控制器和在构建创建您的搜索列表

代码:

class MyController extends ChangeNotifier {
MyController({
this.name = '',
});
String name;
void changeName(String newName) {
name = newName;
notifyListeners();
}
}
class MySearchView extends StatefulWidget {
const MySearchView({
required this.controller,
required this.users,  
super.key, 
});
final MyController controller;
final List<String> users;
@override
State<StatefulWidget> createState() => _MySearchViewState();
}
class _MySearchViewState extends State<MySearchView> {
String _name = '';

@override
void initState() {
widget.controller.addListener(() {
setState(() {
_name = widget.controller.name;
});
});
super.initState();
}

@override
void dispose() {
widget.controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => ListView.builder(
itemBuilder: (context, index) => Text(
widget.users.where((element) => element.contains(_name)).elementAt(index)
),
itemCount: widget.users.where((element) => element.contains(_name)).length,
);
}

编辑:忘记在你的TextField添加onChange: (value) =>controller.changeName(值)