flutter 应用程序中类似 Whatsapp 的搜索功能

Question

正在开发一个 Flutter 应用程序，希望实现类似于 WhatsApp 搜索功能的全局搜索功能。在 WhatsApp 中，用户可以在整个应用程序中搜索消息、联系人和媒体，这使其成为一项强大而方便的功能。我想知道在 Flutter 应用程序中实现此类全局搜索功能的最佳方法和步骤。具体来说，我需要有关如何执行高效搜索、实时过滤和显示结果以及管理数据索引以获得最佳性能的指导。任何可以帮助实现此功能的代码示例或推荐包将不胜感激。谢谢！

在单个屏幕上执行搜索的当前代码。

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
  debugShowCheckedModeBanner: false,
  home: HomePage(),
);
}
 }

class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
List<Folder> folderList = [];

List<Folder> filteredFolderList = [];

bool isSearching = false;

@override
void initState() {
 super.initState();

 initFolderList();
}

void initFolderList() {
 for (int i = 0; i < 30; i++) {
  folderList.add(
    Folder(
      id: i,
      name: 'Folder $i',
      userList: getListOfUsers(),
    ),
  );
 }
 }

 List<User> getListOfUsers() {
   List<User> list = [];

final randomNumberUptoFive = Random().nextInt(5) + 1;
for (int i = 0; i < randomNumberUptoFive; i++) {
  list.add(User(userId: i, username: 'User ${randomNumberUptoFive + i}'));
}
return list;
}

final TextEditingController searchTextController = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(title: const Text('Folder list')),
    body: Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(16),
          child: TextField(
            decoration: const InputDecoration(
                border: OutlineInputBorder(), hintText: 'Search'),
            controller: searchTextController,
            onChanged: (_) {
              final query = searchTextController.text;

              if (query.isNotEmpty) {
                setState(() {
                  isSearching = true;
                  filteredFolderList = folderList
                      .where((folder) =>
                          folder.name.toLowerCase().contains(query))
                      .toList();
                });
              } else {
                setState(() {
                  isSearching = false;
                });
              }
            },
          ),
        ),
        Expanded(
          child: ListView.builder(
            itemCount:
                isSearching ? filteredFolderList.length : folderList.length,
            itemBuilder: (context, index) {
              return ListTile(
                leading: const Icon(Icons.folder),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => UsersView(
                              folder: isSearching
                                  ? filteredFolderList[index]
                                  : folderList[index],
                            )),
                  );
                },
                title: Text(isSearching
                    ? filteredFolderList[index].name
                    : folderList[index].name),
              );
            },
          ),
        ),
      ],
    ));
}
}

class UsersView extends StatelessWidget {
const UsersView({super.key, required this.folder});

final Folder folder;

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text(folder.name)),
  body: ListView.builder(
    itemCount: folder.userList.length,
    itemBuilder: (context, index) {
      return ListTile(
        leading: const Icon(Icons.verified_user),
        title: Text(folder.userList[index].username),
      );
    },
  ),
);
}
}

class Folder {
 final int id;
 final String name;
 final List<User> userList;

Folder({
 required this.id,
 required this.name,
 required this.userList,
});
}

class User {
 final int userId;
 final String username;

 User({
  required this.userId,
  required this.username,
 });
}