在 Flutter 中搜索列表视图

Question

我在网上搜索了如何向我的 Flutter 应用程序添加搜索功能。我有一个列表视图，它从 mysql 数据库获取数据并将其作为 json 字符串传递。我想在列表顶部添加一个搜索框，当用户输入字符串时，它将获取该字符串并搜索列表的名称字段并重新填充列表。这是我的代码。

谢谢你。

    class Home extends StatefulWidget {
    Home({Key key}) : super(key: key);

    @override
    HomeState createState() => HomeState();
    }

    class HomeState extends State<Home> {
    Future<List<Attendants>> students;
    final studentListKey = GlobalKey<HomeState>();
    
    @override
    void initState() {
    super.initState();
    students = getStudentList();
    }

    Future<List<Attendants>> getStudentList() async {
    final response = await http.get("${Env.URL_PREFIX}/list.php");

    final items = json.decode(response.body).cast<Map<String, dynamic>>();
    List<Attendants> students = items.map<Attendants>((json) {
      return Attendants.fromJson(json);
    }).toList();

    return students;
    }

    void refreshStudentList() {
    setState(() {
      students = getStudentList();
     });
     }
  

     @override
     Widget build(BuildContext context) {
     return Scaffold(
       key: studentListKey,
      appBar: AppBar(
        title: Text('Members List'),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.search,
              color: Colors.white,),
              onPressed: null),
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              refreshStudentList();
            },
          )
        ],
      ),
      body: Center(
        child: FutureBuilder<List<Attendants>>(
          future: students,
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            // By default, show a loading spinner.
            if (!snapshot.hasData) return CircularProgressIndicator();

            // Render student lists
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                var data = snapshot.data[index];
                return Card(
                  child: ListTile(
                    leading: Icon(Icons.person),
                    trailing: Icon(Icons.view_list),
                    title: Text(
                      data.name,
                      style: TextStyle(fontSize: 20),
                    ),
                    onTap: () {
                      Navigator.push(
                        context,
                        EnterExitRoute(
                          exitPage: Home(),
                          enterPage: Details(attendants: data),
                        ),
                      );
                    },
                  ),
                );
              },
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return Create();
          }));
        },
      ),
    );
    }
    }

如果我的问题不清楚，请告诉我，以便我进一步解释

Answer 1

如果您在 future 函数中获得有关您搜索的所有对象 添加您的代码：

 // By default, show a loading spinner.
            if (!snapshot.hasData) return CircularProgressIndicator();
          var list = snapshot.data.where((student){
       // Or some other query..
      return student[“some”].contains(searchTerm);
}).toList();

 return ListView.builder(
          itemCount: list.length,
          itemBuilder: (BuildContext context, int index) {
            var data = list[index];
    ..............

否则，如果没有，这是 Flutter 中的另一个主题。

Answer 2

您可以使用

searchable_listview

套餐：

1. 将包添加到您的项目中:

dependencies:
 searchable_listview: ^2.9.0

2. 导入包：在 Dart 文件中，导入

   searchable_listview

   包：

import 'package:searchable_listview/searchable_listview.dart';

3. 在 UI 中使用

   SearchableList

   ：在 UI 中，您可以使用

   SearchableList

   小部件来显示列表并处理搜索。您需要提供一个

   builder

   函数，为列表中的每个项目返回一个小部件。

   filter

   函数用于根据搜索查询过滤列表。这是一个例子：

SearchableList<Attendants>(
 initialList: snapshot.data,
 builder: (Attendants attendant) => ListTile(
   leading: Icon(Icons.person),
   trailing: Icon(Icons.view_list),
   title: Text(
     attendant.name,
     style: TextStyle(fontSize: 20),
   ),
   onTap: () {
     Navigator.push(
       context,
       EnterExitRoute(
         exitPage: Home(),
         enterPage: Details(attendants: attendant),
       ),
     );
   },
 ),
 filter: (value) => snapshot.data.where((attendant) => attendant.name.contains(value)).toList(),
)

在此示例中，

initialList

是初始的参加者列表。

builder

函数为每个话务员返回一个

ListTile

。

filter

函数根据搜索查询过滤列表 来源 2。

4. 将

   ListView.builder

   替换为

   SearchableList

   ：在

   build

   方法中，将

   ListView.builder

   替换为

   SearchableList

   小部件：

return SearchableList<Attendants>(
 initialList: snapshot.data,
 builder: (Attendants attendant) => ListTile(
   leading: Icon(Icons.person),
   trailing: Icon(Icons.view_list),
   title: Text(
     attendant.name,
     style: TextStyle(fontSize: 20),
   ),
   onTap: () {
     Navigator.push(
       context,
       EnterExitRoute(
         exitPage: Home(),
         enterPage: Details(attendants: attendant),
       ),
     );
   },
 ),
 filter: (value) => snapshot.data.where((attendant) => attendant.name.contains(value)).toList(),
);

这应该为 Flutter 中的 ListView 添加搜索功能。当用户在搜索字段中输入内容时，该列表将实时更新。