我试着把一个星期的复选框打了个勾.由于没有编写额外的代码,我创建了一个小部件"Week",当我运行代码时,我可以看到复选框,但当我点击它们时,UI不会改变……我希望当我点击勾选框时,框将变为未勾选,反之亦然.而这并没有发生,我不知道问题出在哪里?请帮帮我...求求你... 谢谢.

以下是我的全部代码:and this is the UI image

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'),
            ],
          ),
        ));
  }
}

...我希望当我点击勾选框时,框将变为未勾选,反之亦然.而这并没有发生,我不知道问题出在哪里?请帮帮我...求求你... 谢谢.

推荐答案

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

在助手函数内部,当您点击时,会调用Build方法,但它不会反映在UI部分中,因为函数的行为只是返回值或执行函数内的代码.

有三种方法可以解决这个问题,

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

这将解决您的问题,但效率不高.

  1. 为本周创建一个单独的有状态小部件.通过创建单独的小部件,小部件可以在其状态更改时管理其状态,并根据小部件的生命周期更新其状态.这是一个高效、干净和可维护的解决方案.
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;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

Flutter相关问答推荐

如何防止alert 对话框在收到通知时出现在某个flutter页面中

如何使用Firebase Firestore来获取外部集合中的文档子集合中的文档

从底部开始固定,然后使其可拖曳Flutter

UI中的Flutter 下拉列表值未更改

应为Map String,dynamic类型的值,但得到的值为type()= Map String,dynamic'

如何在Flutter 安全存储器中存储对象值?

为Android生成时出现Flutter 错误:给定资源值的<;COLOR&>无效

如何对齐 AppBar Actions 中的文本?

在带有 flutter 的 Native Android 中,EventChannel.EventSink 始终为 null

为什么我的图标的一半在定位小部件中消失了?

在 Dart 中按土耳其语字母顺序对字符串进行排序

Flutter居中的SizedBox无法居中

在我使用 flutter_riverpod stateprovider 重新保存代码之前,UI 主题状态不会更新

如何从 Flutter 中的 App2 远程点击 App1 中的按钮

无状态小部件被奇怪地重建

忽略异步函数上的 context.mounted 访问 linting 错误是否安全?

在提供程序包更改通知程序中构建倒计时时钟

如何从 Firebase `get()` 获取 `DocumentReference`

Banner Ad.test 广告单元 ID 是否已过时?

如何将图像网络装箱到具有边界半径的容器中