在 DataTable Flutter 中过滤数据

Question

我已经实现了对单个列的排序，但我想使用 DropDown 过滤器

添加对整个 DataTable 的过滤

这是我的DropDown

的代码

              Row(
                children: [
                  DropdownButton<String>(
                    value: _chosenSubCounty,
                    //elevation: 5,
                    style: TextStyle(color: Colors.black),

                    items: <String>['Mvita', 'Tudor', 'Kisauni'].map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value, style: TextStyle(
                            color: Colors.black,
                            fontSize: 16,
                            fontWeight: FontWeight.w600),
                        ),
                      );
                    }).toList(),
                    hint: Text(
                      "Sub-County",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.w600),
                    ),
                    onChanged: (String value) {
                      setState(() {
                        _chosenSubCounty = value;
                      });
                    },
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  DropdownButton<String>(
                    value: _chosenGender,
                    //elevation: 5,
                    style: TextStyle(color: Colors.black),

                    items: <String>['Male', 'Female'].map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value,
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 16,
                              fontWeight: FontWeight.w600),),
                      );
                    }).toList(),
                    hint: Text(
                      "Gender",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.w600),
                    ),
                    onChanged: (String value) {
                      setState(() {
                        _chosenGender = value;
                      });
                    },
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  DropdownButton<String>(
                    value: _chosenMembership,
                    //elevation: 5,
                    style: TextStyle(color: Colors.black),

                    items: <String>['Youth Member below 18', 'Youth Member above 18', 'Ordinary Member', 'Life Member'].map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value,
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 16,
                              fontWeight: FontWeight.w600),
                        ),
                      );
                    }).toList(),
                    hint: Text(
                      "Membership Type",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.w600),
                    ),
                    onChanged: (String value) {
                      setState(() {
                        _chosenMembership = value;
                      });
                    },
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  DropdownButton<String>(
                    value: _chosenDesignation,
                    //elevation: 5,
                    style: TextStyle(color: Colors.black),

                    items: <String>['CHV', 'RCAT', 'Staff', 'Ordinary'].map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value,
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 16,
                              fontWeight: FontWeight.w600),
                        ),
                      );
                    }).toList(),
                    hint: Text(
                      "Designation",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.w600),
                    ),
                    onChanged: (String value) {
                      setState(() {
                        _chosenDesignation = value;
                      });
                    },
                  ),
                  SizedBox(
                    width: 20,
                  ),
                ],
              ),

这是我的 DataTable

的代码

              Expanded(
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: DataTable(
                    sortAscending: isAscending,
                    sortColumnIndex: 1,
                    columnSpacing: 35.0,
                    columns: [
                      DataColumn(
                        label: Text('Name', style: TextStyle(color: Colors.black, /* fontSize: 20.0,*/fontWeight: FontWeight.w700),),
                        onSort: (index, b){
                          setState(() {
                            // names.sort((a,b) { a.name.compareTo(b.name)});
                          });
                        },
                      ),
                      DataColumn(
                        label: Text('Age', style: TextStyle(color: Colors.black, /* fontSize: 20.0,*/fontWeight: FontWeight.w700),),
                        numeric: true,
                        onSort: (columnIndex, ascending){
                          print(ascending);

                          setState(() {
                            this.isAscending = ascending;
                            ascending ? volunteers.sort((a,b) => a.age.compareTo(b.age)) : volunteers.sort((a,b) => b.age.compareTo(a.age));
                          });
                        },
                      ),
                      DataColumn(
                        label: Text('Gender', style: TextStyle(color: Colors.black, /* fontSize: 20.0,*/fontWeight: FontWeight.w700),),
                      ),
                      DataColumn(
                        label: Text('Phone', style: TextStyle(color: Colors.black, /* fontSize: 20.0,*/fontWeight: FontWeight.w700),),
                      ),
                      DataColumn(
                        label: Text('ID', style: TextStyle(color: Colors.black, /* fontSize: 20.0,*/fontWeight: FontWeight.w700),),
                      ),
                      DataColumn(
                        label: Text('Sub-County', style: TextStyle(color: Colors.black, /* fontSize: 20.0,*/fontWeight: FontWeight.w700),),
                      ),
                      DataColumn(
                        label: Text('Membership', style: TextStyle(color: Colors.black, /* fontSize: 20.0,*/fontWeight: FontWeight.w700),),
                      ),
                      DataColumn(
                          label: Text('Designation', style: TextStyle(color: Colors.black,/* fontSize: 20.0,*/fontWeight: FontWeight.w700),),
                      ),
                    ],
                    rows: volunteers.map((volunteer) =>
                      DataRow(
                        cells: [
                          DataCell(Text(volunteer.name)),
                          DataCell(Text(volunteer.age.toString())),
                          DataCell(Text(volunteer.gender)),
                          DataCell(Text(volunteer.phone_number)),
                          DataCell(Text(volunteer.id_number)),
                          DataCell(Text(volunteer.sub_county)),
                          DataCell(Text(volunteer.membership_type)),
                          DataCell(Text(volunteer.designation_type)),
                        ])).toList()
                  ),
                ),
              ),

这是我的数据的代码

class Volunteer {


String name;
  int age;
  String gender;
  String phone_number;
  String id_number;
  String sub_county;
  String membership_type;
  String designation_type;

  Volunteer({this.name, this.age, this.gender, this.phone_number, this.id_number, this.sub_county, this.membership_type, this.designation_type});
}

var volunteers = <Volunteer> [
  Volunteer(name: "Abud Said", age: 25, gender: "Male", phone_number: "024061136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Abud Said", age: 15, gender: "Male", phone_number: "024061136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Abud Said", age: 15, gender: "Male", phone_number: "024061136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Said Zuher Abud", age: 15, gender: "Male", phone_number: "022061136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Said Zuher Abud", age: 25, gender: "Male", phone_number: "022061136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Said Zuher Abud", age: 35, gender: "Male", phone_number: "022061136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Zuher Abud Said", age: 35, gender: "Male", phone_number: "022061136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Zuher Abud Said", age: 35, gender: "Male", phone_number: "024061136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Ibtisam Abud Said", age: 45, gender: "Male", phone_number: "024067136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
  Volunteer(name: "Ibtisam Abud Said", age: 45, gender: "Male", phone_number: "024067136", id_number: "34303098", sub_county: "Mvita", membership_type: "Life Member", designation_type: "Ordinary"),
];

Answer 1

您可以在选择过滤器后修改志愿者列表。

您可能希望保留一份志愿者列表的副本并将其命名为 filteredVolunteers，这样可以保留原始列表并在未选择过滤器时再次使用它。

//when a sub country is selected
DropdownButton<String>(
                    value: _chosenSubCounty,
                    //elevation: 5,
                    style: TextStyle(color: Colors.black),

                    items: <String>['Mvita', 'Tudor', 'Kisauni'].map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value, style: TextStyle(
                            color: Colors.black,
                            fontSize: 16,
                            fontWeight: FontWeight.w600),
                        ),
                      );
                    }).toList(),
                    hint: Text(
                      "Sub-County",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.w600),
                    ),
                    onChanged: (String value) {
                      setState(() {
                        _chosenSubCounty = value;
                        volunteers = volunteers.where((element) => element.sub_county.contains(_chosenSubCounty)).toList();
                        
                      });
                    },
                  ),

在 DataTable Flutter 中过滤数据

Filter data in DataTable Flutter

widget

dart

flutter