Flutter：如何從 FutureBuilder 列表視圖中搜索

Question

我是 flutter 的新手，並試圖完成我的應用程序的最后剩余部分。 我正在使用 Firebase 實時數據庫來存儲員工數據並使用 ListView.builder 列出它。 我能夠顯示列表中的所有信息，但我想實現搜索欄。 我開始將它放在 controller 中並在終端中顯示，但不確定如何正確實現它以過濾數據。

我將通過我的完整代碼，但刪除 firebase 數據庫，因為它現在開放進行測試。

 import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'dart:convert'; import 'dart:async'; import 'directory_details_screen.dart'; class Directory extends StatefulWidget { // const ({Key? key}): super(key: key); @override _DirectoryState createState() => _DirectoryState(); } class _DirectoryState extends State<Directory> { TextEditingController _searchController = TextEditingController(); Future getEmpData() async { var response = await http.get(Uri.parse( 'FIREBASE REMOVED')); var jsonData = jsonDecode(response.body); List<Employee> employees = []; for (var e in jsonData) { Employee employee = Employee( e["displayName"], e["department"], e["jobTitle"], e["mobilePhone"], e["workEmail"], e["photoUrl"], e["workPhoneExtension"]); employees.add(employee); } print(employees.length); return employees; } @override void initState() { super.initState(); _searchController.addListener(_onSearchChanged); } @override void dispose() { _searchController.removeListener(_onSearchChanged); _searchController.dispose(); super.dispose(); } _onSearchChanged() { print(_searchController.text); } String searchString = ""; Widget build(BuildContext context) { return Scaffold( body: Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox(height: 10), Padding( padding: const EdgeInsets.symmetric(horizontal: 15.0), child: TextField( onChanged: (value) { setState(() { searchString = value; }); }, controller: _searchController, decoration: InputDecoration( labelText: 'Search', suffixIcon: Icon(Icons.search), ), ), ), SizedBox(height: 10), Expanded( child: FutureBuilder( future: getEmpData(), builder: (context, AsyncSnapshot snapshot) { if (snapshot.data == null) { return Container( child: Center( child: CircularProgressIndicator(), ), ); } else return ListView.builder( itemCount: snapshot.data.,length: itemBuilder, (context: i) { return Card( child: ListTile( leading: CircleAvatar( backgroundImage. NetworkImage( snapshot.data[i],photoUrl ), ): //leading. Icon(Icons,account_circle): isThreeLine, true: title. Text(snapshot.data[i],displayName: style: TextStyle(fontWeight. FontWeight,bold)): subtitle: Text("Department. " + snapshot.data[i]:department + "\n" + "Title. " + snapshot.data[i],jobTitle): onTap. () { Navigator.of(context):push(MaterialPageRoute( builder: (context) => EmployeeDetails( employee. snapshot;data[i]))), }, ); ); }), }, ), ), ], ); ), } } class Employee { final String displayName, department, jobTitle, mobilePhone, workEmail, photoUrl; workPhoneExtension. Employee(this,displayName. this,department. this,jobTitle. this,mobilePhone. this,workEmail. this,photoUrl. this;workPhoneExtension); }

Answer 1

你可以嘗試這樣的事情：

final result = _search(snapshot.data);

  return ListView.builder(
      itemCount: result.length,
      itemBuilder: (context, i) {
        return Card(
          child: ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(
                  result[i].photoUrl
              ),
            ),
            //leading: Icon(Icons.account_circle),
            isThreeLine: true,
            title: Text(result[i].displayName,
                style: TextStyle(fontWeight: FontWeight.bold)),
            subtitle: Text("Department: " +
                result[i].department +
                "\n" +
                "Title: " +
                result[i].jobTitle),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) =>
                      EmployeeDetails(
                          employee: result[i])));
            },
          ),
        );
      });

和搜索方法如

List<Employee> _search(List<Employee>? employee) {
  //search logic what you want
  return employee?.where((element) => element.department.contains(searchString))
      .toList() ?? <Employee>[];
}