從列表變量更新 CheckboxListTile。 Flutter

Question

我正在寫一個 taskList class 應該允許我檢查任務是否完成。 除了 Checkbox 本身，一切正常。 我無法讓屏幕更新復選框以進行實際檢查。 每個復選框的 onChanged 部分是我不僅可以更新屏幕，還可以使用 setState 更新每個任務的 boolean isCompleted 的地方。 不幸的是，我能夠讓 onChanged 工作的唯一方法，即。 選中該框，是通過在 class 本身中聲明變量並使用它們來代替。

出於這個原因，我認為這個問題與我在 object 中使用變量有關。我認為 flutter 無法識別當更改 userTaskList[index].isComplete 時它會影響屏幕，因此它不會費心重建. 我是 flutter 的新手，所以這可能是完全錯誤的。 ** 我點擊了復選框，它改變了變量，它沒有更新帶有復選框中復選標記的屏幕。**

這是我的任務列表小部件中的問題所在

import 'package:flutter/material.dart';
import '../models/task.dart';
import 'package:intl/intl.dart';

class TaskList extends StatefulWidget {
  const TaskList({super.key});
  @override
  State<TaskList> createState() => _TaskListState();
}

class _TaskListState extends State<TaskList> {
  @override
  Widget build(BuildContext context) {
    List<Task> userTaskList = [
      Task(name: "Spanish Hw", dueDate: DateTime.now(), priority: 1),
      Task(name: "Push Day", dueDate: DateTime.now(), priority: 3),
      Task(name: "English HL Essay", dueDate: DateTime.now(), priority: 2)
    ];

    return Container(
      height: 300,
      margin: const EdgeInsets.all(20),
      child: ListView.builder(
        itemCount: userTaskList.length,
        itemBuilder: ((context, index) {
          return Dismissible(
              key: ValueKey(userTaskList[index]),
              onDismissed: (direction) {
                userTaskList.removeAt(index);
              },
              direction: DismissDirection.startToEnd,
              background: Container(
                  padding: const EdgeInsets.all(10),
                  alignment: Alignment.centerLeft,
                  color: Colors.red,
                  child: const Icon(
                    Icons.delete,
                    color: Colors.white,
                  )),
              child: Card(
                elevation: 10,
                child: SizedBox(
                  height: 50,
                  **child: CheckboxListTile(
                    //subtitle: Text(taskList[index].description),
                    activeColor: Colors.green,
                    value: userTaskList[index].isComplete,
                    onChanged: (val) {
                      print('Checkbox clicked, new value: $val');
                      setState(() {
                        userTaskList[index].isComplete = val ?? false;
                      });
                    },**
                    title: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text(
                          userTaskList[index].name,
                          textAlign: TextAlign.center,
                        ),
                        Text(
                          DateFormat('EEEE, MMM D')
                              .format(userTaskList[index].dueDate),
                          textAlign: TextAlign.right,
                        ),
                      ],
                    ),
                  ),
                ),
              ));
        }),
      ),
    );
  }
}

以防萬一這里很重要是我的任務 class

import 'package:flutter/material.dart';

class Task {
  bool isComplete = false;
  String name;
  String? description = "";
  DateTime dueDate;
  //If you have time use RatingBar() for priority
  int priority;

  Task(
      {required this.name,
      this.description,
      required this.dueDate,
      required this.priority});
}

Answer 1

• 該變量必須定義在build方法體之外，否則會在SetState的時候初始化。

class _TaskListState extends State<TaskList> {
  List<Task> userTaskList = [
    Task(name: "Spanish Hw", dueDate: DateTime.now(), priority: 1),
    Task(name: "Push Day", dueDate: DateTime.now(), priority: 3),
    Task(name: "English HL Essay", dueDate: DateTime.now(), priority: 2)
  ];

  @override
  Widget build(BuildContext context) {