如何在Pluto Grid中配置类似Ant Design Table的勾选过滤菜单？

核心思路：自定义表头组件 + 过滤状态管理 #

Pluto Grid本身没有内置勾选式过滤配置，但可以通过自定义表头结合数据过滤逻辑实现需求，具体步骤如下：

• 1. 替换默认表头，添加触发按钮
  为需要过滤的列自定义表头组件，加入下拉触发按钮，点击后弹出过滤选择菜单。示例代码片段：

  Widget _customHeader(PlutoColumn column) {
    return InkWell(
      onTap: () => _showFilterMenu(column),
      child: Row(
        children: [
          Text(column.title),
          const SizedBox(width: 4),
          const Icon(Icons.arrow_drop_down, size: 16),
        ],
      ),
    );
  }
  

• 2. 实现勾选过滤弹窗
  弹窗内展示当前列的所有唯一值，用CheckboxListTile实现多选，确认后触发数据过滤。示例代码片段：

  void _showFilterMenu(PlutoColumn column) {
    // 提取当前列的所有唯一值
    final uniqueValues = _gridRows.map((row) => row.cells[column.field]!.value).toSet().toList();
    List<dynamic> selectedFilters = [..._columnFilters[column.field] ?? []];
  
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('过滤${column.title}'),
        content: SizedBox(
          width: double.maxFinite,
          height: 300,
          child: ListView.builder(
            itemCount: uniqueValues.length,
            itemBuilder: (context, index) {
              final value = uniqueValues[index];
              return CheckboxListTile(
                title: Text(value.toString()),
                value: selectedFilters.contains(value),
                onChanged: (bool? checked) {
                  if (checked == true) {
                    selectedFilters.add(value);
                  } else {
                    selectedFilters.remove(value);
                  }
                },
              );
            },
          ),
        ),
        actions: [
          TextButton(onPressed: () => Navigator.pop(context), child: const Text('取消')),
          TextButton(
            onPressed: () {
              _columnFilters[column.field] = selectedFilters;
              _applyFilters();
              Navigator.pop(context);
            },
            child: const Text('确认'),
          ),
        ],
      ),
    );
  }
  

• 3. 编写数据过滤逻辑
  维护一个存储各列勾选值的状态Map，每次确认过滤后重新筛选数据源并更新表格。示例代码片段：

  Map<String, List<dynamic>> _columnFilters = {};
  List<PlutoRow> _originalRows = [];
  List<PlutoRow> _gridRows = [];
  
  void _applyFilters() {
    List<PlutoRow> filteredRows = [..._originalRows];
    
    _columnFilters.forEach((field, values) {
      if (values.isNotEmpty) {
        filteredRows = filteredRows.where((row) {
          final cellValue = row.cells[field]!.value;
          return values.contains(cellValue);
        }).toList();
      }
    });
  
    setState(() {
      _gridRows = filteredRows;
    });
  }
  

• 4. 关联到Pluto Grid配置
  在列配置中指定自定义表头，将上述逻辑绑定到表格：

  PlutoGrid(
    columns: [
      PlutoColumn(
        title: '示例列',
        field: 'sampleField',
        titleRenderer: (rendererContext) {
          return _customHeader(rendererContext.column);
        },
        renderer: (rendererContext) {
          return Text(rendererContext.cell.value.toString());
        },
      ),
      // 其他列配置
    ],
    rows: _gridRows,
    // 其他表格配置项
  )
  

额外优化建议 #

• 给过滤菜单添加“全选/全不选”按钮，提升操作效率
• 处理空值、重复值的显示逻辑
• 添加过滤状态标识（如表头图标变色），让用户直观知晓列的过滤状态

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