Flutter日历待办App报错：bool类无[]方法，ListView无法显示

错误原因定位 #

报错的核心是**dayTodo的数据结构被错误填充**：

• 原todoList的每个元素是包含日期、内容、状态的三元组列表（如['Nov 22, 2022','todo22',false]）
• 在onDaySelected方法中，使用dayTodo.addAll(todoList[i])会将三元组的每个元素（字符串、字符串、布尔值）拆解后单独加入dayTodo，导致dayTodo变成['Nov 22, 2022','todo22',false]而非预期的[['Nov 22, 2022','todo22',false]]
• 后续ListView.builder访问dayTodo[index][1]时，当index=2，dayTodo[2]是布尔值false，调用[]方法自然触发错误

修复步骤 #

1. 修正待办项填充逻辑 #

修改onDaySelected中的遍历逻辑，将匹配的完整待办项添加到dayTodo，而非拆解元素：

onDaySelected: (selectedDay, focusedDay){
  if(!isSameDay(_selectedDay, selectedDay)){
    setState((){  
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;
      dateTime = focusedDay;
      dayTodo.clear();
      String targetDate = DateFormat.yMMMd().format(dateTime);
      for(int i = 0; i<todoList.length; i++){
        if(todoList[i][0] == targetDate){
          dayTodo.add(todoList[i]); // 添加完整待办项，而非拆解
        }
      }
    });
  };
},

2. 绑定复选框的真实状态 #

原TodoList组件的复选框状态固定为false，需要将待办项的完成状态传入并绑定：

• 更新todo_list.dart组件：

import 'package:flutter/material.dart';

class TodoList extends StatelessWidget {
  final String todo;
  final bool isChecked;
  final Function(bool?)? onChanged;
  const TodoList({
    super.key,
    required this.todo,
    required this.isChecked,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.all(20),
      color: Colors.red,
      child: Row(
        children: [
          Checkbox(
            value: isChecked,
            onChanged: onChanged
          ),
          Text(todo),
          Text('2022'),
        ],
      ),
    );
  }
}

• 在Main.dart的ListView.builder中传递状态参数：

return TodoList(
  todo: dayTodo[index][1],
  isChecked: dayTodo[index][2],
  onChanged:(value)=>onChanged(value, index),
);

3. 优化空状态显示 #

当选中日期无待办项时，显示友好提示：

// 替换原SizedBox部分
dayTodo.isEmpty 
    ? Center(child: Text('该日期暂无待办'))
    : SizedBox(
        height:400,
        child: ListView.builder(
          itemCount: dayTodo.length,
          itemBuilder: (context, index) {
            return TodoList(
              todo:dayTodo[index][1],
              isChecked: dayTodo[index][2],
              onChanged:(value)=>onChanged(value, index),
            );
          },
        ),
      )

修复后效果 #

点击日历日期时，dayTodo会正确存储该日期下的所有待办项，ListView正常渲染每个待办的内容和复选框状态，复选框点击后也能正确更新状态。

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