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

Question

我尝试在 flutter 中制作一个复选框一周。由于没有编写额外的代码，我制作了一个小部件“week”，当我运行代码时，我可以看到复选框，但是当我单击它们时，UI 不会改变......我期望当我单击勾选框时 = > 该框变为未勾选状态，反之亦然。这并没有发生，我不知道问题是什么？请帮助我...请... 谢谢你。

这是我的整个代码：

import "package:flutter/services.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) {
    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) {
                  setState(() {
                    value = new_Value;
                  });
                }),
          ],
        ),
      ),
    );
  }

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

...我希望当我点击一个勾选框时 => 该框会变为未勾选状态，反之亦然。这并没有发生，我不知道问题是什么？请帮助我...请... 谢谢你。

Answer 1

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

在辅助函数内部，当您点击时，会调用 build 方法，但不会反映在 UI 部分，因为该函数的行为只是返回一个值或执行函数内部的代码。

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

1. 在构建方法中声明所有日期的周小部件。这个解决方案有效，但你必须多次编写重复的代码。
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;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}