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

Question

对不起，如果这不是很清楚。我欢迎任何澄清的建议，因为我是 Flutter 的新手，也想在 StackOverflow 上提问。

我将发布有效和无效的内容。基本上我想要一个 Perk 小部件，其中包含不同数量的 Checkbox 小部件。当我在 build 方法中创建小部件时，我可以设置它们的状态（选中或未选中），但使用列表中的 for 循环动态创建 Checkbox 小部件并将该列表传递给 Row 会使复选框无响应。

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

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

工作（但我必须硬编码复选框的数量 - 我需要能够根据 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),
              ),
            ),
          ],
        ));
  }
}

奖金

我还需要将每个复选框状态保存在 sharepreferences 中。我打算为每个条目创建一个单独的条目，但我确信有一种更有效的方法。他们不需要做任何事情，只需要记住它们是否被选中或取消选中，并在重新启动时保持不变。

Answer 1

DOESN'T WORK 部分有很多错误。

您必须在 Perk 类中存储复选框（标题、图标、计数）的详细信息。您只需要标题和图标。然后您可以通过调用titles.length 来检索复选框计数。 检查项目的状态必须在 State 类（List checkList）内。

将_checkList的类型改为List并在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();
)

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