为什么 Flutter 的复选框中 UI 没有改变？

您已经为周小部件创建了一个辅助函数，这不是声明能够在运行时更新其状态的小部件的好方法。

在帮助程序函数内部，当您点击时，将调用生成方法，但它不会反映在 UI 部分中，因为函数的行为只是返回一个值或执行函数内的代码。

有 3 种方法可以解决这个问题，

1. 在 build 方法中声明所有日期的星期小部件。此解决方案有效，但您必须多次编写重复的代码。
2. 用 StatefulBuilder 包装周小部件，该生成器提供更新小部件状态的方法，

Widget week(bool? value, String day) {
  return StatefulBuilder(
    builder: (context, updatets) {
      return Padding(
        padding: const EdgeInsets.all(5.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(day),
              Checkbox(
                value: value,
                onChanged: (bool? new_Value) {
                  updatets(() {
                    value = new_Value;
                  });
                },
              ),
            ],
          ),
        ),
      );
    },
  );
}

这将解决您的问题，但效率不高。

3. 为一周创建一个单独的有状态小部件。通过创建单独的小组件，小组件会在状态发生变化时管理其状态，并根据小组件的生命周期更新其状态。这是一个高效、清洁和可维护的解决方案。

import 'package:flutter/material.dart';

class Week extends StatefulWidget {
  Week({required this.day, this.value = false});

  bool? value;
  final String day;

  @override
  State<Week> createState() => _WeekState();
}

class _WeekState extends State<Week> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(5.0),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(widget.day),
            Checkbox(
              value: widget.value,
              onChanged: (bool? new_Value) {
                setState(() {
                  widget.value = new_Value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

请试试这个

代码中的问题在于如何更新状态。当您将值传递给 week 函数时，它是一个局部变量，在函数内部更改它不会影响 _Example 类中的状态变量（mon、tue 等）。

要解决此问题，您需要直接在 onChanged 回调中更新状态变量（mon、tue 等）。下面是代码的更新版本：

import "package:flutter/material.dart";

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyPage(),
    );
  }
}

class MyPage extends StatefulWidget {
  MyPage({super.key});

  @override
  State<MyPage> createState() => _Example();
}

class _Example extends State<MyPage> {
  bool mon = true;
  bool tue = true;
  bool wed = true;
  bool thu = true;
  bool fri = true;
  bool sat = true;
  bool sun = true;

  Widget week(bool value, String day, Function(bool) onChanged) {
    return Padding(
      padding: const EdgeInsets.all(5.0),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(day),
            Checkbox(
                value: value,
                onChanged: (bool? newValue) {
                  onChanged(newValue ?? false);
                }),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HDBOOKS'),
      ),
      body: Center(
        child: Row(
          children: [
            week(mon, 'Mon', (newValue) {
              setState(() {
                mon = newValue;
              });
            }),
            week(tue, 'Tue', (newValue) {
              setState(() {
                tue = newValue;
              });
            }),
            week(wed, 'Wed', (newValue) {
              setState(() {
                wed = newValue;
              });
            }),
            week(thu, 'Thu', (newValue) {
              setState(() {
                thu = newValue;
              });
            }),
            week(fri, 'Fri', (newValue) {
              setState(() {
                fri = newValue;
              });
            }),
            week(sat, 'Sat', (newValue) {
              setState(() {
                sat = newValue;
              });
            }),
            week(sun, 'Sun', (newValue) {
              setState(() {
                sun = newValue;
              });
            }),
          ],
        ),
      ),
    );
  }
}

这样，onChanged 回调会直接更新状态变量，并且 UI 应该会正确反映更改。