Flutter列表添加复选框及bool?与bool类型赋值错误求助

问题分析 #

1. 类型错误原因：CheckboxListTile的onChanged回调参数val是bool?（可空类型），但你的values字典中值的类型是bool（非空），直接赋值会触发类型不匹配错误。
2. 逻辑问题：当前代码使用固定的values（包含foo和bar），和从Firebase获取的学生列表无关联，无法为每个学生单独维护选中状态。

解决方案 #

1. 修复类型错误 #

在onChanged回调中处理val的可空性，使用空值合并运算符??给默认值，确保赋值的是非空bool类型：

onChanged: (bool? val) {
  setState(() {
    values[key] = val ?? false;
  });
}

2. 重构复选状态逻辑，关联学生列表 #

原来的固定values无法匹配动态学生列表，需根据Firebase返回的数据动态生成复选状态：

• 将values的key改为学生节点的唯一标识（如Firebase节点key或学生ID），确保每个学生对应独立的选中状态。
• 在StreamBuilder获取数据后，初始化values，为每个学生设置初始选中状态为false。

完整修正后的代码 #

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> {
  // 用学生节点的唯一key作为Map键，维护每个学生的选中状态
  Map<String, bool> values = {};
  List<dynamic> items = [];
  // 存储Firebase节点key，关联学生数据与选中状态
  List<String> studentKeys = [];

  String? _selectedItem;
  DateTime _selectedDate = DateTime.now();
  final auth = FirebaseAuth.instance;
  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();
                  studentKeys.clear();
                  // 同步收集节点key与学生数据
                  map.forEach((key, value) {
                    studentKeys.add(key);
                    items.add(value);
                  });
                  // 初始化选中状态，确保每个学生都有对应项
                  for (String key in studentKeys) {
                    values.putIfAbsent(key, () => false);
                  }
                  return ListView.builder(
                    itemCount: items.length,
                    itemBuilder: (context, index) {
                      String studentKey = studentKeys[index];
                      return CheckboxListTile(
                        title: Text(
                          items[index]['sname'],
                          style: const TextStyle(
                            fontSize: 19,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        value: values[studentKey],
                        onChanged: (bool? val) {
                          setState(() {
                            values[studentKey] = val ?? false;
                          });
                        },
                      );
                    },
                  );
                }
              },
            ),
          ),
        ],
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            padding: const EdgeInsets.fromLTRB(28, 0, 0, 0),
            child: FloatingActionButton.extended(
              onPressed: () {
                // 输出所有选中的学生信息
                for (int i = 0; i < studentKeys.length; i++) {
                  String key = studentKeys[i];
                  if (values[key] == true) {
                    print('选中的学生：${items[i]['sname']}');
                  }
                }
              },
              label: const Text('ADD'),
              icon: const Icon(Icons.add),
              backgroundColor: Colors.purple,
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点说明 #

• 新增studentKeys列表，存储Firebase中每个学生节点的唯一key，实现学生数据与选中状态的关联。
• 在StreamBuilder中遍历Firebase返回的map，同步收集节点key和学生数据，确保每个学生都有对应的选中状态项。
• 修复onChanged中的类型错误，使用val ?? false将可空的bool?转为非空bool。
• 移除嵌套ListView，避免布局异常，直接用ListView.builder生成每个学生的复选框项。

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