Flutter中如何自动选中选中项上方条目并取消选中下方所有条目

需求明确：选中某一CheckboxListTile时，自动选中该条目上方所有条目；取消选中时，自动取消该条目下方所有条目。

你给出的代码存在几个问题：

• 外层多了一个for (var item in _data)循环，ListView.builder本身会遍历数据源，这个循环完全多余
• 使用_data.indexOf(item)获取索引有风险，如果列表里存在重复元素，会拿到错误的索引
• 只处理了选中时的向上全选逻辑，没实现取消时的向下全取消逻辑

以下是修正后的完整实现：

首先定义数据模型类：

class CheckItem {
  String title;
  bool isChecked;
  CheckItem(this.title, this.isChecked);
}

然后是StatefulWidget的完整代码：

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

  @override
  State<LinkedCheckboxPage> createState() => _LinkedCheckboxPageState();
}

class _LinkedCheckboxPageState extends State<LinkedCheckboxPage> {
  // 模拟数据源
  final List<CheckItem> _data = [
    CheckItem('选项1', false),
    CheckItem('选项2', false),
    CheckItem('选项3', false),
    CheckItem('选项4', false),
    CheckItem('选项5', false),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('联动复选框')),
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: _data.length,
        itemBuilder: (context, index) {
          final item = _data[index];
          return CheckboxListTile(
            title: Text(item.title),
            value: item.isChecked,
            onChanged: (value) {
              if (value == null) return;
              setState(() {
                if (value) {
                  // 选中时，将当前条目及上方所有条目设为选中
                  for (int i = 0; i <= index; i++) {
                    _data[i].isChecked = true;
                  }
                } else {
                  // 取消选中时，将当前条目及下方所有条目设为未选中
                  for (int i = index; i < _data.length; i++) {
                    _data[i].isChecked = false;
                  }
                }
              });
            },
          );
        },
      ),
    );
  }
}

关键逻辑说明： #

• 直接使用ListView.builder提供的index，避免了indexOf可能带来的索引错误问题
• 分两种分支处理：
  • 当勾选复选框（value=true），遍历从0到当前index的所有条目，设置为选中状态
  • 当取消勾选（value=false），遍历从当前index到列表末尾的所有条目，设置为未选中状态
• 每次修改后调用setState触发UI刷新，确保复选框状态同步更新

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