如何在Dart中限制Choice Chip选中列表最多4项？

核心逻辑 #

处理Chip选中状态时，通过判断已选中列表的长度控制选择行为：

• 取消选中：直接从列表移除对应选项
• 选中新选项：仅当已选数量小于4时允许添加，否则拒绝操作（可选提示用户）

代码示例 #

以下是基于StatefulWidget的完整实现：

import 'package:flutter/material.dart';

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

  @override
  State<LimitedChoiceChips> createState() => _LimitedChoiceChipsState();
}

class _LimitedChoiceChipsState extends State<LimitedChoiceChips> {
  // 维护已选中的选项列表
  final List<String> _selectedChoices = [];
  // 最大可选数量
  static const int _maxSelection = 4;

  void _handleChoiceToggle(String choice) {
    setState(() {
      if (_selectedChoices.contains(choice)) {
        // 取消选中，移除选项
        _selectedChoices.remove(choice);
      } else {
        // 检查是否已达最大选中数
        if (_selectedChoices.length < _maxSelection) {
          _selectedChoices.add(choice);
        } else {
          // 提示用户无法继续选择
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('最多只能选择4项')),
          );
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('限制选择数量的Chip')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Wrap(
          spacing: 8.0,
          runSpacing: 8.0,
          children: [
            '选项A', '选项B', '选项C', '选项D', '选项E', '选项F', '选项G'
          ].map((choice) {
            final isSelected = _selectedChoices.contains(choice);
            return ChoiceChip(
              label: Text(choice),
              selected: isSelected,
              onSelected: (_) => _handleChoiceToggle(choice),
              // 已选满时，禁用未选中的Chip（可选优化）
              enabled: !(_selectedChoices.length >= _maxSelection && !isSelected),
            );
          }).toList(),
        ),
      ),
    );
  }
}

可选优化点 #

• 禁用未选中Chip：已选满4项时，将未选中的Chip设为enabled: false，避免用户无效点击
• 样式提示：给禁用状态的Chip设置特殊样式，让用户直观感知无法选择
• 全局状态管理：若使用Provider、Riverpod等工具，只需将_selectedChoices和处理逻辑移至状态类，UI层调用即可

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