Flutter 通过listview中显示的数据进行颤振搜索

我有一个flatter应用程序，它可以在线获取用户列表，并在listview中显示数据。我曾尝试实现一个搜索函数来搜索数据，但是每次我尝试在textfield中键入任何内容时，整个页面都会刷新并执行api调用以再次获取数据。这是获取和显示数据的代码

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Prospect List"),
        centerTitle: true,
      ),
      body: prospectData(),
    );
  }

  Widget prospectData() {
    return FutureBuilder(
        future: _fetchData(),
        builder: (BuildContext context, AsyncSnapshot<ProspectList> snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
            case ConnectionState.waiting:
            case ConnectionState.active:
              return Center(
                child: CircularProgressIndicator(),
              );
            case ConnectionState.done:
              if (snapshot.hasError)
                return Text("There was an error: ${snapshot.error}");
              prospectList = snapshot.data;
              return ListView.builder(
                itemCount: prospectList.data.length + 1,
                itemBuilder: (context, i) {
                  if (prospectList.data.length > 0) {
                    return i == 0 ? _searchBar() : _prospectData(i - 1);
                  } else {
                    return Center(child: CircularProgressIndicator());
                  }
                },
              );
            default:
              return null;
          }
        });
  }

  _prospectData(i) {
    final name =
        prospectList.data[i].firstname + " " + prospectList.data[i].lastname;
    final phone = prospectList.data[i].phone;
    final email = prospectList.data[i].email;
    return ListTile(
      title: Text(
        name,
        style: TextStyle(fontSize: 18),
      ),
      subtitle: Text(
        phone,
        style: TextStyle(fontSize: 16),
      ),
      onTap: () => Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => CustomerInfo(
                    name: name,
                    phone: phone,
                    email: email,
                  ))),
    );
  }

编辑

---

我找到了我正在寻找的解决方案，因此，您实现文本字段的方式出现了错误

尝试将onChanged更改为OnSubmited，一切都会按预期进行

每当按下任何键盘键时，都会调用onChanged

---

onSubmitted仅当用户按下Submit按钮时，才会产生一个API调用。

因此，在实现文本字段的方式中，这是一个错误

尝试将onChanged更改为OnSubmited，一切都会按预期进行

每当按下任何键盘键时，都会调用onChanged

---

onSubmitted仅当用户按下Submit按钮时，才会产生一个API调用。

这里的问题在于

FutureBuilder

。为了避免不必要的刷新，您需要首先声明您的

Future

，然后在

initState

中调用Future：

Future myFuture;
@override
  void initState() {
    super.initState();
    myFuture = _fetchData();
  }

...
FutureBuilder(
        future: myFuture,
...

---

您可以在本视频中找到有关您的问题的更多详细信息：

这里的问题在于

FutureBuilder

。为了避免不必要的刷新，您需要首先声明您的

Future

，然后在

initState

中调用Future：

Future myFuture;
@override
  void initState() {
    super.initState();
    myFuture = _fetchData();
  }

...
FutureBuilder(
        future: myFuture,
...

---

您可以在本视频中找到有关您的问题的更详细信息：

每次更新主小部件的状态时，小部件都会重新生成。这将导致您的

小部件prospectData（）

再次运行，获取数据并重新初始化您的

浏览列表

我建议您的小部件树采用不同的结构，由两个小部件组成：

SearchPage
ProspectList

SearchPage
是一个无状态小部件，负责获取潜在客户列表

ProspectList
是一个StatefulWidget（或者，在我的示例中是一个HookWidget），负责显示和过滤已获取的潜在客户列表


完整源代码：
import'包装：faker/faker.dart'；
进口“包装：颤振/材料.省道”；
进口“包装：颤振钩/颤振钩.省道”；
导入“package:freezed_annotation/freezed_annotation.dart”；
“主要的，冷冻的，省道”部分；
void main（）{
runApp(
材料聚丙烯(
debugShowCheckedModeBanner:false，
标题：“搜索演示”，
主页：SearchPage（），
),
);
}
类SearchPage扩展了无状态小部件{
Future _fetchData（）异步{
等待未来。延迟（持续时间（秒：2））；
返回数据；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“潜在客户列表”），
标题：对，
),
正文：未来建设者(
未来：_fetchData（），
生成器：（上下文，快照）{
if（snapshot.connectionState==connectionState.done）{
返回（snapshot.hasError）
？文本（“出现错误：${snapshot.error}”）
：ProspectList（prospects:snapshot.data）；
}
返回中心（子项：CircularProgressIndicator（））；
}),
);
}
}
类ProspectList扩展了HookWidget{
最后名单前景；
constprospectlist（{Key-Key，this.prospects}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
最终搜索条件=使用状态（“”）；
返回列表视图(
儿童：[
填充物(
填充：边缘设置。全部（8.0），
孩子：TextField(
装饰：输入装饰（hintText:“搜索…”），
onChanged：（value）=>searchTerm.value=value，
),
),
……前景
.其中（（潜在客户）=>
searchTerm.value.isEmpty||
prospect.name.toLowerCase（）.contains（searchTerm.value））
.地图(
（潜在客户）=>ListTile(
标题：Text（prospect.name，style:TextStyle（fontSize:18）），
字幕：Text（prospect.phone，style:TextStyle（fontSize:16）），
onTap:（）=>{}，
),
)
.toList（），
],
);
}
}
最终伪造者=伪造者（）；
最终dummyData=List.generate(
100,
（索引）=>客户(
firstname:faker.person.firstname（），
lastname:faker.person.lastname（），
电话：“+1${faker.randomGenerator.integer（999999999）}”，
电子邮件：faker.internet.email（），
));
@冻结
抽象类Customer实现$Customer{
康斯特工厂客户({
字符串名，
字符串lastname，
字符串电话，
字符串电子邮件，
})=\u客户；
常数客户；
字符串get name=>“$firstname$lastname”；
}

依赖关系
在本示例中，我使用了以下依赖项：


，作为
StatefulWidgets
，以定义我的
客户
模型。请注意，
main.freezed.dart
只是由
build\u runner
为
freezed
生成的文件
，生成一组随机的
客户

运行样本有问题吗？
逐步：

将以下依赖项添加到您的
pubspec.yaml
：
名称：stackoverflow
描述：一个新的颤振项目。
发布到：“无”
版本：1.0.0+1
环境：
sdk:“>=2.7.0每次更新主小部件的状态时，小部件都会重新生成。这会导致您的
Widget prospectData（）
再次运行，获取数据并重新初始化您的
prospectList

我
flutter pub run build_runner watch --delete-conflicting-outputs