Flutter考勤系统：修复Firebase Realtime Database复选框批量选中问题

你的问题核心在于用了单个布尔变量_ischecked控制所有复选框，所以点击任何一个都会同步修改所有复选框的状态。要实现单独选中，需要给每个学生条目分配独立的状态存储。

修改步骤： #

1. 替换全局单一状态为状态列表
   将原来的bool _ischecked = false;替换为List<bool> _checkedStates = [];，用来存储每个学生的选中状态。

2. 同步状态列表与学生数据
   在StreamBuilder获取到Firebase数据后，初始化或更新_checkedStates，确保其长度和学生列表一致：

   items = map.values.toList();
   // 初始化或更新选中状态列表，保持和学生数据长度一致
   if (_checkedStates.length != items.length) {
     setState(() {
       _checkedStates = List<bool>.filled(items.length, false);
     });
   }
   

3. 绑定单个复选框到对应状态
   修改CheckboxListTile的value和onChanged，指向对应索引的状态值：

   value: _checkedStates[Index],
   onChanged: (val) {
     setState(() {
       _checkedStates[Index] = val!;
     });
   }
   

4. 优化提交逻辑（可选）
   在点击ADD按钮时，可以轻松获取所有选中的学生：

   onPressed: () {
     List<dynamic> attendedStudents = [];
     for (int i = 0; i < items.length; i++) {
       if (_checkedStates[i]) {
         attendedStudents.add(items[i]);
       }
     }
     // 在这里处理选中学生的考勤记录逻辑，比如写入Firebase
     print("已出勤学生：${attendedStudents.map((e) => e['sname']).toList()}");
   },
   

修改后的完整代码 #

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

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

  @override
  State<TestFile> createState() => _TestFileState();
}

class _TestFileState extends State<TestFile> {
  List<dynamic> items = [];
  List<dynamic> newlist = [];

  String? _selectedItem;
  // 替换单个布尔值为状态列表
  List<bool> _checkedStates = [];
  DateTime _selectedDate = DateTime.now();
  List<String> myList = [];
  List<String> checklist = [];

  final ref = FirebaseDatabase.instance.ref('attendance').child('studentlist');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        bottom: PreferredSize(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Padding(
                  padding: const EdgeInsets.only(left: 16.0),
                  child: DropdownButton<String>(
                    value: _selectedItem,
                    onChanged: (String? newValue) {
                      setState(() {
                        _selectedItem = newValue;
                      });
                    },
                    items: <String>[
                      'period 1',
                      'period 2',
                      'period 3',
                      'period 4',
                      'period 5',
                      'period 6',
                      'period 7',
                    ].map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                      );
                    }).toList(),
                    icon: const Icon(Icons.arrow_drop_down),
                    iconSize: 40,
                    underline: Container(),
                    iconEnabledColor: Colors.white,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                    dropdownColor: Colors.purple,
                  ),
                ),
              ),
              const SizedBox(width: 100),
              Container(
                child: Center(
                  child: IconButton(
                    icon: const Icon(Icons.calendar_month, color: Colors.white),
                    onPressed: () async {
                      final DateTime? picked = await showDatePicker(
                        context: context,
                        initialDate: _selectedDate,
                        firstDate: DateTime(1900),
                        lastDate: DateTime.now(),
                      );
                      if (picked != null && picked != _selectedDate) {
                        setState(() {
                          _selectedDate = picked;
                        });
                      }
                    },
                  ),
                ),
              ),
              const SizedBox(width: 5),
              Text(
                DateFormat('dd/MM/yyyy').format(_selectedDate),
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ],
          ),
          preferredSize: const Size.fromHeight(30.0),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: StreamBuilder(
              stream: ref.onValue,
              builder: (context, AsyncSnapshot<DatabaseEvent> snapshot) {
                if (!snapshot.hasData) {
                  return const CircularProgressIndicator();
                } else {
                  Map<dynamic, dynamic> map =
                      snapshot.data!.snapshot.value as dynamic;
                  items.clear();
                  items = map.values.toList();
                  
                  // 同步状态列表长度与学生数据
                  if (_checkedStates.length != items.length) {
                    setState(() {
                      _checkedStates = List<bool>.filled(items.length, false);
                    });
                  }

                  return ListView.builder(
                    itemCount: snapshot.data!.snapshot.children.length,
                    itemBuilder: (context, Index) {
                      return CheckboxListTile(
                        title: Text(
                          items[Index]['sname'],
                          style: const TextStyle(
                              fontSize: 19, fontWeight: FontWeight.w500),
                        ),
                        // 绑定对应索引的状态
                        value: _checkedStates[Index],
                        onChanged: (val) {
                          setState(() {
                            // 更新对应索引的状态
                            _checkedStates[Index] = val!;
                          });
                        },
                      );
                    },
                  );
                }
              },
            ),
          ),
        ],
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            padding: const EdgeInsets.fromLTRB(28, 0, 0, 0),
            child: FloatingActionButton.extended(
              onPressed: () {
                // 获取所有选中的学生
                List<dynamic> attendedStudents = [];
                for (int i = 0; i < items.length; i++) {
                  if (_checkedStates[i]) {
                    attendedStudents.add(items[i]);
                  }
                }
                // 这里可以添加写入Firebase考勤记录的逻辑
                print("已出勤学生：${attendedStudents.map((e) => e['sname']).toList()}");
              },
              label: const Text('ADD'),
              icon: const Icon(Icons.add),
              backgroundColor: Colors.purple,
            ),
          ),
        ],
      ),
    );
  }
}

补充说明 #

如果你的Firebase学生数据包含唯一ID（比如每个学生节点的key），更推荐用Map<String, bool>来存储选中状态，这样即使学生列表顺序变化，状态也不会错乱。例如：

Map<String, bool> _checkedStates = {};

在获取数据时：

items.clear();
items = map.entries.map((entry) {
  // 保存学生的key和数据
  return {'key': entry.key, ...entry.value};
}).toList();

// 初始化选中状态
for (var item in items) {
  _checkedStates.putIfAbsent(item['key'], () => false);
}

然后CheckboxListTile的绑定改为：

value: _checkedStates[items[Index]['key']],
onChanged: (val) {
  setState(() {
    _checkedStates[items[Index]['key']] = val!;
  });
},

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