Flutter中Multiselect组件特定选项互斥选择限制实现咨询

一、基于现有multiselect插件的适配方案 #

通过监听选中项变化，手动维护互斥规则：

• 选中all时，自动清空其他所有选中项
• 选中非all选项时，若当前选中列表包含all，则自动移除all

代码示例（以MultiSelectChipField为例） #

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

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

  @override
  State<MutuallyExclusiveMultiSelect> createState() => _MutuallyExclusiveMultiSelectState();
}

class _MutuallyExclusiveMultiSelectState extends State<MutuallyExclusiveMultiSelect> {
  final List<String> _options = ['all', 'first', 'second', 'third'];
  List<String> _selectedItems = [];

  void _handleSelectionChange(List<String> newSelection) {
    List<String> updatedSelection = List.from(newSelection);
    
    if (updatedSelection.contains('all')) {
      updatedSelection = ['all'];
    } else {
      updatedSelection.remove('all');
    }

    setState(() {
      _selectedItems = updatedSelection;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MultiSelectChipField(
          items: _options.map((item) => MultiSelectItem<String>(item, item)).toList(),
          initialValue: _selectedItems,
          onTap: _handleSelectionChange,
          chipDisplay: MultiSelectChipDisplay(
            onTap: (item) {
              setState(() {
                _selectedItems.remove(item);
              });
            },
          ),
        ),
      ),
    );
  }
}

如果使用对话框样式的MultiSelectDialogField，在onConfirm回调中处理相同逻辑：

MultiSelectDialogField(
  items: _options.map((item) => MultiSelectItem<String>(item, item)).toList(),
  initialValue: _selectedItems,
  onConfirm: (results) {
    List<String> updatedResults = List.from(results);
    if (updatedResults.contains('all')) {
      updatedResults = ['all'];
    } else {
      updatedResults.remove('all');
    }
    setState(() {
      _selectedItems = updatedResults;
    });
  },
)

二、自定义互斥多选列表（灵活可控） #

若插件限制较多，直接用CheckboxListTile自定义实现，完全掌控逻辑：

代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<CustomMutuallyExclusiveMultiSelect> createState() => _CustomMutuallyExclusiveMultiSelectState();
}

class _CustomMutuallyExclusiveMultiSelectState extends State<CustomMutuallyExclusiveMultiSelect> {
  final List<String> _options = ['all', 'first', 'second', 'third'];
  final Map<String, bool> _selectedStatus = {};

  @override
  void initState() {
    super.initState();
    for (var option in _options) {
      _selectedStatus[option] = false;
    }
  }

  void _toggleSelection(String option) {
    setState(() {
      if (option == 'all') {
        for (var key in _selectedStatus.keys) {
          _selectedStatus[key] = key == 'all';
        }
      } else {
        _selectedStatus['all'] = false;
        _selectedStatus[option] = !_selectedStatus[option]!;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _options.length,
        itemBuilder: (context, index) {
          final option = _options[index];
          return CheckboxListTile(
            title: Text(option),
            value: _selectedStatus[option],
            onChanged: (value) {
              if (value != null) {
                _toggleSelection(option);
              }
            },
          );
        },
      ),
    );
  }
}

说明 #

自定义方案无需依赖第三方插件，逻辑清晰，还可根据需求自定义UI样式（比如修改Checkbox颜色、列表项布局等）。

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