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

“不工作”部分有很多错误。

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

将_checkList的类型更改为List并在initState中对其进行初始化。

@override
void initState() {
    super.initState();
    ...
    _checkList = List(widget.titles.lenght);// 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();
)

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

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

1 个答案: