如何在 flutter 中为一项添加复选框

Question

好的，基本上我的复选框有这个问题，我实际上构建了一个 todolist 应用程序，所以我需要一个复选框小部件来检查你完成的所有活动。 但是有一个问题，当我想检查一个活动时，所有活动都同时检查。 我已经阅读了小部件 flutter 页面上的所有内容，但我不明白我可以在没有事先定义的情况下只检查一项。 如果你能帮助我，谢谢。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

 class Home extends StatefulWidget {
 const Home({Key? key}) : super(key: key);

 @override
 _HomeState createState() => _HomeState();
 }

 class _HomeState extends State<Home> {
 List todos = [];
 String input = "";
@override
bool checkedValue =  false;
void initState() {
super.initState();
todos.add("Item1");
todos.add("Item2");
todos.add("Item3");
todos.add("Item4");

 }
 @override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("TASKS",style: TextStyle(
      fontFamily: "BaksoSapi",
    ),),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      showDialog(context: context, builder: (BuildContext context){
        return AlertDialog(
          title: Text("Add Todolist !"),
          content: TextField(
            onChanged: (String value){
              input = value;
            },
          ),
          actions: <Widget>[
            FlatButton(onPressed: (){setState(() {
              todos.add(input);
            });

            }, child: Text("Add"))
          ],
        );
      });
    },
  child: Icon(Icons.add,
              color: Colors.white,
  ),
  ),
  body: ListView.builder(
      itemCount: todos.length,
      itemBuilder:(BuildContext context,int index){
        return Dismissible(key: Key(todos[index]),
          child: Card(
            elevation: 4,
            margin: EdgeInsets.all(8),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadiusDirectional.circular(8)
            ),
          child: CheckboxListTile(
            title: Text(todos[index]),
            controlAffinity: ListTileControlAffinity.leading,
            activeColor: Colors.redAccent,
            value: checkedValue,onChanged: (newValue){
              setState(() {
                checkedValue = newValue!;
              });
          },
            ),
        ),);
      },
      )
    );

Answer 1

好的，所以您声明了一个List来存储您的项目，并声明一个bool checkedValue来存储您的价值项目是否被检查。

但明显的问题是您只声明了一个布尔值，但您可能拥有无限数量的项目。 当你改变一个值时，你认为会发生什么？

解决此问题的最简单方法是简单地将 bool 设为一个列表，如下所示：

List<bool> checkedValues = [];

然后，每当您将新项目添加到项目列表中时，都需要将false添加到checkedValues列表中。

todos.add("Item1");
todos.add("Item2");
todos.add("Item3");
todos.add("Item4");
checkedValues.addAll([false, false, false, false]);

然后，您只需像这样更改 value 和 onChanged 属性：

value: checkedValues[index],onChanged: (newValue){
              setState(() {
                checkedValues[index] = newValue!;
              });

这种方法有一个小问题，就是如果你忘记在每次添加待办事项时添加一个布尔值，你的应用程序将无法运行。 要解决此问题，您可以编写一个 class ，它同时包含一个字符串和一个布尔值，并且只有一个列表。