Flutter-如何在复选框的动态列表中设置复选框小部件的状态

Question

对不起，如果这还不清楚。我欢迎任何有关澄清的建议，因为我是新手的颤抖，也要在stackoverflow上询问问题。

我会发布什么和不起作用。基本上，我想拥有一个具有不同数量的复选框小部件的PERK小部件。当我在构建方法中创建小部件时，我可以设置它们的状态（已检查或未选中），但是使用列表中的for loop在列表中动态创建复选框窗口小部件，并将该列表传递到一行，使复选框无响应。

>

不起作用（但是我不知道为什么，这是我要的）

import 'package:flutter/material.dart';
import 'package:gloomhaven_enhancement_calc/data/constants.dart';
class Perk extends StatefulWidget {
  final int numOfChecks;
  final String details;
  final List<String> icons;
  Perk(this.numOfChecks, this.details, this.icons);
  @override
  State<StatefulWidget> createState() => PerkState();
}
class PerkState extends State<Perk> {
  int _numOfChecks;
  String _details;
  List<String> _icons;
  bool _isChecked = false;
  List<Checkbox> checkList = [];
  @override
  void initState() {
    super.initState();
    _numOfChecks = widget.numOfChecks;
    _details = widget.details;
    _icons = widget.icons;
    setState(() {
      void _itemChange(bool val) {
//    setState(() {
        _isChecked = val;
//    });
        print('clliccked' + val.toString());
      }
      for (int x = 0; x < _numOfChecks; x++) {
        checkList.add(Checkbox(
          value: _isChecked,
          onChanged: (bool value) => _itemChange(value),
        ),);
      }
    });
  }

  Widget build(BuildContext context) {
    return Container(
        color: Colors.grey.withOpacity(0.75),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            // here I pass the list of checkboxes created above, but they
            // don't respond to user clicks
            Row(children: checkList),
            Expanded(
              child: Text(
                _details,
                style: TextStyle(fontFamily: secondaryFontFamily),
              ),
            ),
          ],
        ));
  }
}

works（但是我必须在复选框数量中进行硬码 - 我需要能够基于Numofchecks参数动态创建它们）

import 'package:flutter/material.dart';
import 'package:gloomhaven_enhancement_calc/data/constants.dart';
class Perk extends StatefulWidget {
  final int numOfChecks;
  final String details;
  final List<String> icons;
  Perk(this.numOfChecks, this.details, this.icons);
  @override
  State<StatefulWidget> createState() => PerkState();
}
class PerkState extends State<Perk> {
  int _numOfChecks;
  String _details;
  List<String> _icons;
  bool _isChecked = false;
  List<Checkbox> checkList = [];
  @override
  void initState() {
    super.initState();
    _numOfChecks = widget.numOfChecks;
    _details = widget.details;
    _icons = widget.icons;
  }
  void checkboxChecked(bool val) {
//    setState(() {
    _isChecked = val;
//    });
    print('clliccked' + val.toString());
  }
  Widget build(BuildContext context) {
    return Container(
        color: Colors.grey.withOpacity(0.75),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Row(children:
            <Widget>[
              // here I create checkboxes based on the number but it's 
              // obviously a hack just to make it work
              Checkbox(
                value: _isChecked,
                onChanged: (bool value) => checkboxChecked(value),
              ),
              _numOfChecks > 1 ? Checkbox(
                value: _isChecked,
                onChanged: (bool value) => checkboxChecked(value),
              ) : Container(),
              _numOfChecks > 2 ? Checkbox(
                value: _isChecked,
                onChanged: (bool value) => checkboxChecked(value),
              ) : Container(),
              _numOfChecks > 3 ? Checkbox(
                value: _isChecked,
                onChanged: (bool value) => checkboxChecked(value),
              ) : Container(),
              _numOfChecks > 4 ? Checkbox(
                value: _isChecked,
                onChanged: (bool value) => checkboxChecked(value),
              ) : Container(),
            ]
            ),
            Expanded(
              child: Text(
                _details,
                style: TextStyle(fontFamily: secondaryFontFamily),
              ),
            ),
          ],
        ));
  }
}

奖金

我还需要将每个复选框状态保存在SharePreference中。我将为每个条目创建一个单独的条目，但我敢肯定有一种更有效的方法。他们不需要做任何事情，只需要记住他们是否已检查或未选中，并通过重新启动进行持续。

Answer 1

工作部分没有很多错误。

您必须在PERK类中存储复选框（标题，图标，计数）的详细信息。您只需要标题和图标。然后，您可以通过调用titles.length来检索复选框计数。检查项目的状态必须在州类内部（列表清单）。

更改_checklist的类型以列出并在Initstate中进行初始化。

@override
void initState() {
    super.initState();
    ...
    _checkList = List(widget.titles.length);// or List.generate(widget.numOfChecks, (i) => false);
}

要构建许多小部件（或其他项目），您可以使用此方法：

Row(
  children: List.generate(
    _numOfChecks,
    (i) => Checkbox(
      value: _checkList[i],
      onChanged: (bool value) => setState(() { _checkList[i] = value; }),
    )
  ).toList();
)

我希望我的答案能帮助您找到正确的解决方案。