如何更改 Flutter gridview.count 复选框列表的状态？答案

【问题标题】：How to change status of the Flutter gridview.count checkbox list?如何更改 Flutter gridview.count 复选框列表的状态？
【发布时间】：2020-03-24 17:00:42
【问题描述】：

我使用 Flutter gridview.count 生成了一个复选框列表。现在我想分别更改每个复选框的状态。

你能告诉我如何更改复选框的值

网格视图

child: new GridView.count(
                            crossAxisCount: 2,
                            shrinkWrap: true,
                            childAspectRatio: 8.0,
                            children:
                                List.generate(pllistdata.length, (index) {
                              return Pldata(pllistdata[index], index);
                            }),
                          ),

返回的小部件

Card Pldata(String plname, int id) {
return Card(
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          '$plname',
          style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.black54,
              fontSize: 16.0),
        ),
        CircularCheckBox(
          value: pl_status,
          materialTapTargetSize: MaterialTapTargetSize.padded,
          onChanged: (x) {
            setState(() {
            prefs.setStringList('PL', sflist);
            });
          },
          activeColor: Colors.red[800],
          inactiveColor: Colors.grey,
        )
      ],
    ),
  ),
);

}

【问题讨论】：

标签： flutter checkbox gridview

【解决方案1】：

将您的 Pldata 卡片小部件更改为有状态类，并在其构造函数中传递必要的值。此外，如果您已经有 pllistdata 列表，那么在使用 builder 构建 gridview 时会很好。我修改了你的代码。检查它是否适合您。

 child: GridView.builder(
    itemCount: pllistdata.length,
    shrinkWrap: true,
    itemBuilder: (context, index) {
      return Pldata(pllistdata[index], index);
    },
    gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  ),

并更改了有状态的 pldata

    class Pldata extends StatefulWidget {
      final String plname;
      final int id;

      Pldata(this.plname, this.id);

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

    class _PldataState extends State<Pldata> {
      bool pl_status = false;

      @override
      Widget build(BuildContext context) {
        return Card(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  '${widget.plname}',
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.black54,
                      fontSize: 16.0),
                ),
                Checkbox(
                  onChanged: (x) {
                    setState(() {
                      pl_status = !pl_status;
                     // prefs.setStringList('PL', sflist); 
                     // you can pass prefs via constructor or initialize in 
                      //  init
                    });
                  },
                  activeColor: Colors.red[800],
                  value: pl_status,
                )
              ],
            ),
          ),
        );
      }
    }

【讨论】：

很高兴为您提供帮助 :)
为什么对 GridView.builder() 的更改在网格视图计数中没有复选框不起作用或者它是来自 Flutter 团队的错误？

【解决方案2】：

您可以将复选框值传递给函数，从您的列表项中，您可以识别每个项目并相应地更改值。

 Widget checkbox(String title, bool boolValue) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(title),
            Checkbox(
              value: boolValue,
              onChanged: (bool value) {
                setState(() {
                  switch (title) {
                    case HOT_SERVE:
                      hotServe = value;
                      break;

                    case UTENSILS:
                      utensils = value;
                      break;
                    case CARTING:
                      transportation = value;
                      break;
                    case SAMPLE:
                      sample = value;
                      break;
                  }
                });
              },
            )
          ],
        );
      }

【讨论】：