Flutter中基于下拉选择列表动态更新DataTable行

当然可以实现这个需求，以下是针对你代码的修改方案：

关键修改点 #

• 新增Maid数据类，统一管理女佣的各项信息
• 初始化完整的女佣数据源，对应下拉框中的每个选项
• 在下拉多选框的onChanged回调中调用setState，触发UI刷新
• 根据selectedValue1过滤数据源，动态生成DataTable的行数据

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:dropdown_search/dropdown_search.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text("Customer Home Page"),
        titleSpacing: 00.0,
        centerTitle: true,
        toolbarHeight: 60.2,
        toolbarOpacity: 0.8,
        elevation: 0.00,
        backgroundColor: Colors.black,
      ),
      body: const C_HP(),
    );
  }
}

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

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

// 定义女佣数据模型
class Maid {
  final String id;
  final String name;
  final String occupiedDays;
  final String occupiedDates;
  final String age;
  final String displayName; // 对应下拉框中的选项文本（如"Maid 1"）

  Maid({
    required this.id,
    required this.name,
    required this.occupiedDays,
    required this.occupiedDates,
    required this.age,
    required this.displayName,
  });
}

class _CHPState extends State<C_HP> {
  List<String> items = ["Maid 1", "Maid 2", "Maid 3", "Maid 4"];
  List<String> selectedValue1 = [];
  bool _valu1 = false;
  bool _valu2 = false;
  bool _valu3 = false;

  // 初始化所有女佣的数据源
  final List<Maid> allMaids = [
    Maid(
      id: "1",
      name: "Alexa",
      occupiedDays: "Sunday",
      occupiedDates: "01/01/2024",
      age: "18",
      displayName: "Maid 1",
    ),
    Maid(
      id: "2",
      name: "Alex",
      occupiedDays: "Sunday",
      occupiedDates: "01/01/2024",
      age: "18",
      displayName: "Maid 2",
    ),
    Maid(
      id: "3",
      name: "Emma",
      occupiedDays: "Monday",
      occupiedDates: "02/01/2024",
      age: "22",
      displayName: "Maid 3",
    ),
    Maid(
      id: "4",
      name: "Liam",
      occupiedDays: "Tuesday",
      occupiedDates: "03/01/2024",
      age: "25",
      displayName: "Maid 4",
    ),
  ];

  // 根据选中项过滤需要展示的女佣数据
  List<Maid> get filteredMaids {
    if (selectedValue1.isEmpty) {
      return []; // 未选中任何项时返回空列表，也可以返回全部数据
    }
    return allMaids.where((maid) => selectedValue1.contains(maid.displayName)).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      const SizedBox(height: 10),
      Row(children: <Widget>[
        const SizedBox(width: 30),
        Flexible(
          child: SizedBox(
            height: 80,
            width: 450,
            child: CheckboxListTile(
              title: const Text('Cleaning'),
              subtitle: const Text('select the checkbox to have cleaning services'),
              secondary: Container(
                height: 50,
                width: 50,
                child: Image.asset(
                  "assets/images/other_background_image.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0),
                side: const BorderSide(color: Colors.black),
              ),
              autofocus: false,
              isThreeLine: true,
              activeColor: Colors.blue,
              checkColor: Colors.white,
              selected: _valu1,
              value: _valu1,
              onChanged: (bool? value) {
                setState(() {
                  _valu1 = value ?? true;
                });
              },
            ),
          ),
        ),
        const SizedBox(width: 10),
        Flexible(
            child: SizedBox(
          height: 80,
          width: 500,
          child: CheckboxListTile(
            title: const Text('Cooking'),
            subtitle: const Text('select the checkbox to have cooking services'),
            secondary: Container(
              height: 50,
              width: 50,
              child: Image.asset(
                "assets/images/other_background_image.jpg",
                fit: BoxFit.cover,
              ),
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0),
              side: const BorderSide(color: Colors.black),
            ),
            autofocus: false,
            isThreeLine: true,
            activeColor: Colors.blue,
            checkColor: Colors.white,
            selected: _valu2,
            value: _valu2,
            onChanged: (bool? value2) {
              setState(() {
                _valu2 = value2 ?? true;
              });
            },
          ),
        )),
        const SizedBox(width: 10),
        Flexible(
          child: SizedBox(
            height: 80,
            width: 500,
            child: CheckboxListTile(
              title: const Text('Elderly Care'),
              subtitle: const Text('select the checkbox to have Elderly Care services'),
              secondary: Container(
                height: 50,
                width: 50,
                child: Image.asset(
                  "assets/images/other_background_image.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0),
                side: const BorderSide(color: Colors.black),
              ),
              autofocus: false,
              isThreeLine: true,
              activeColor: Colors.blue,
              checkColor: Colors.white,
              selected: _valu3,
              value: _valu3,
              onChanged: (bool? value3) {
                setState(() {
                  _valu3 = value3 ?? true;
                });
              },
            ),
          ),
        ),
      ]),
      const SizedBox(height: 40),
      Flexible(
        child: SizedBox(
            width: 400,
            child: DropdownSearch<String>.multiSelection(
              items: items,
              popupProps: const PopupPropsMultiSelection.menu(
                showSelectedItems: true,
                disabledItemFn: (String s) => s.startsWith('I'),
              ),
              onChanged: (List<String> selectedValue) {
                setState(() {
                  selectedValue1 = [...selectedValue];
                });
              },
            )),
      ),
      const SizedBox(height: 40),
      SizedBox(
          height: 500,
          width: 850,
          child: DataTable(columns: const [
            DataColumn(label: Text('ID')),
            DataColumn(label: Text('Name')),
            DataColumn(label: Text('Occupied Days')),
            DataColumn(label: Text('Occupied Dates')),
            DataColumn(label: Text('Age')),
          ], rows: filteredMaids.map((maid) {
            return DataRow(cells: [
              DataCell(Text(maid.id)),
              DataCell(Text(maid.name)),
              DataCell(Text(maid.occupiedDays)),
              DataCell(Text(maid.occupiedDates)),
              DataCell(Text(maid.age)),
            ]);
          }).toList()))
    ]);
  }
}

说明 #

• 新增的Maid类用来统一管理每个女佣的所有信息，方便后续扩展和维护
• filteredMaids getter方法会根据当前选中的selectedValue1自动过滤出需要展示的数据
• 在下拉框的onChanged中调用setState，确保选中项变化后UI能及时刷新
• DataTable的行数据通过filteredMaids.map动态生成，完全跟随选中项变化

内容的提问来源于stack exchange，提问作者Ram Kashyap