Flutter CheckBox不会将选中的项目保存在空列表/集中

Question

我正在尝试在我的应用中实现复选框，以便当我点击给定列表中的项目时，它会在另一个列表/集中获得saved（我正在使用Set）。但是由于某些原因，当我点击其中的任何一项时，所有项目都会被检查。 我希望应用程序将列表中所有被“选中”的项目保存到空列表中。非常感谢您的帮助

你们可以检查所有代码here。我需要帮助的代码：

class FavoriteList extends StatefulWidget {
  @override
  _FavoriteListState createState() => _FavoriteListState();
}

class _FavoriteListState extends State<FavoriteList> {
  bool isChecked = false;

  final Set _saved = Set();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 53,
        itemBuilder: (context, index) {
          return CheckboxListTile(
            checkColor: Colors.indigo,
            value: isChecked,
            onChanged: (val) {
              setState(() {
                isChecked = val;
                if(val == true){
                  _saved.add(context);
                } else{
                  _saved.remove(context);
                }
              });
            },
            title: Row(
              children: <Widget>[
                Image.asset('lib/images/${images[index]}'),
                SizedBox(width: 10,),
                Text(nameOfSite[index]),
              ],
            ),
          );
        },
      ),
    );
  }
}

Answer 1

我做了很少的更改，现在您的代码正在运行。

我所做的更改：

1. 从代码中删除isChecked用法，因为包含已检查项目数据的Set，所以不需要它。
2. 不要将上下文保存在Set中，而是保存index。
3. 给定值为_saved.contains(index)，如果索引位于Set中，它将设置复选框为选中状态；如果索引不存在于集合中，它将为未选中状态。

以下为工作代码。

---

class FavoriteList extends StatefulWidget {
  @override
  _FavoriteListState createState() => _FavoriteListState();
}

class _FavoriteListState extends State<FavoriteList> {
  // bool isChecked = false; // changed 

  final Set _saved = Set();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 53,
        itemBuilder: (context, index) {
          return CheckboxListTile(
            checkColor: Colors.indigo,
            // value: _saved.contains(context), // changed 
            value: _saved.contains(index),
            onChanged: (val) {
              setState(() {
                // isChecked = val;           // changed 
                // if(val == true){           // changed 
                //   _saved.add(context);     // changed 
                // } else{                    // changed 
                //   _saved.remove(context);  // changed 
                // }                          // changed 
                if(val == true){
                  _saved.add(index);
                } else{
                  _saved.remove(index);
                }
              });
            },
            title: Row(
              children: <Widget>[
                Image.asset('lib/images/${images[index]}'),
                SizedBox(width: 10,),
                Text(nameOfSite[index]),
              ],
            ),
          );
        },
      ),
    );
  }
}

Answer 2

您需要创建一个Object类来存储每个项目的复选框状态。

一个例子：

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  _FavoriteListState createState() => _FavoriteListState();
}

class _FavoriteListState extends State<Demo> {
  final List<ObjectClass> demoData = List.generate(53, (i) {
    return ObjectClass(
        checked: false,
        name: "Name " + i.toString(),
        image:
            "http://cdn.sci-news.com/images/2017/11/image_5475-V1247-Orionis.jpg");
  });

  Set _saved = Set();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: demoData.length,
        itemBuilder: (context, index) {
          return CheckboxListTile(
            checkColor: Colors.indigo,
            value: demoData[index].checked,
            onChanged: (val) {
              setState(() {

                if (val == true) {
                  _saved.add(demoData[index]);
                } else {
                  _saved.remove(demoData[index]);
                }

                 demoData[index].checked = val; // you can also iterate through this demoData list and check for the checked items to find all saved items

              });
            },
            title: Row(
              children: <Widget>[
                Image.asset("${demoData[index].image}"),
                SizedBox(
                  width: 10,
                ),
                Text("${demoData[index].name}")
              ],
            ),
          );
        },
      ),
    );
  }
}

class ObjectClass {
  bool checked;
  String name;
  String image;

  ObjectClass({this.checked, this.name, this.image});
}