Question

我有很多复选框，因为您可以看到上传的图片，请先查看图片。

现在的问题是，您可以看到3张卡片查看状况，过敏和过去的手术。并且所有这些卡都包含复选框，现在发生的情况是，当我选中或取消选中任何复选框时，CheckBox的UI不会更新为打勾或取消勾号，并且在build方法之外还有复选框。

任何人都可以让我知道我在做什么错，我也将共享复选框代码吗？

编辑

动态创建复选框

List<Widget> _dynamicListWidget(List<dynamic> list) {

 List<Widget> widgetList = List<Widget>();
 for (var i = 0; i < list.length; i++) {
  Condition condition = list[i];
  widgetList.add(
    Container(
      width: _containerWidth,
      //padding: EdgeInsets.only(top: 2, bottom: 2),
      child: Row(
        children: <Widget>[
          Expanded(
              child: Container(
            margin: EdgeInsets.only(left: 10),
            child: Text(condition.name, style: _textStyle),
          )),
          //Expanded(child: Container()),
          Checkbox(
            value: condition.selected,
            onChanged: (bool value) {
              print("$value  value");
              setState(() {
                condition.selected = value;
              });
              addRemoveFavHealth(value, condition.id);
            },
          ),
        ],
      ),
    ),
  );
}
return widgetList;

}

创建卡视图

 Widget mainbody(String name, List<dynamic> dynamicList) {
final screenWidth = MediaQuery.of(context).size.width;
final screenheight = MediaQuery.of(context).size.height;
print("$screenWidth width of device");
List<Condition> list = List();

return Container(
  width: screenWidth * 0.49,
  child: Card(
    color: Colors.white,
    child: Column(
      children: <Widget>[
        Container(
          //width: 200,
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
          decoration: BoxDecoration(
            color: Colors.black12,
          ),
          child: Row(
            children: <Widget>[
              ClipOval(
                child: Material(
                  color: Colors.white,
                  child: SizedBox(
                    width: 40,
                    height: 40,
                    child:
                        /*Image.asset(
                                        'assets/icons/doc_icon.png'),*/
                        Icon(
                      Icons.playlist_add_check,
                      color: AppTheme.primaryColor,
                    ),
                  ),
                ),
              ),
              Flexible(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        _localization.localeString(name),
                        style: TextStyle(color: AppTheme.primaryColor),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        Container(
          child: Column(
            children: _dynamicListWidget(list),
          ),
        ),
      ],
    ),
  ),
);

}

构建方法

@override
Widget build(BuildContext context) {
  _localization = AppTranslations.of(context);

  return Expanded(
    child: SingleChildScrollView(
      child: Column(
        children: _mainList,
      ),
    ) 
  );
}

在构建方法中，_mainList是主体方法的列表。

Answer 1

您的问题是，您正在for loop内分配“条件”值，然后期望当您执行setState进行更改时，它会反映在原始条件列表中。在这里，我有一个示例，该示例使用带有列的ListView.builder而不是for loop来产生相同的效果，但正确地更改了外部列表上变量的值，并且与您的方法并行：

See the code running here on DartPad

class CheckBox63112014 extends StatefulWidget {
  @override
  _CheckBox63112014State createState() => _CheckBox63112014State();
}

class _CheckBox63112014State extends State<CheckBox63112014> {
  List checks = [
    true,
    false,
    false,
    true,
    false,
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Column(
          children: <Widget>[
            Text('ListView.builder'),
            buildList(checks),
          ],
        ),
        Column(
          children: <Widget>[
            Text('For loop'),
            Container(
              height: 400,
              width: 100,
              child: ListView(
                children: badList(checks),
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget buildList(List checks){
    return Container(
      height: 400,
      width: 100,
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: checks.length,
        itemBuilder: (context, index) {
          return Checkbox(value: checks[index],
            onChanged: (value) {
              print('ListView $index $value');
              setState(() {
                checks[index] = !checks[index];
              });
            },
          );
        },
      ),
    );
  }

  List<Widget> badList(checks){
    List<Widget> widgetList = List<Widget>();
    for (var i = 0; i < checks.length; i++) {
      bool check = checks[i];
      widgetList.add(
        Checkbox(value: check,
          onChanged: (value) {
            print('For Loop $i $value');
            setState(() {
              check = value;
            });
          },
        )
      );
    }

    return widgetList;
  }
}

如果将其更改为此，您的代码应该可以工作：

Widget _dynamicListWidget(List<dynamic> list) {
  return ListView.builder(
    physics: NeverScrollableScrollPhysics(),
    itemCount: list.length,
    itemBuilder: (context, index) {
      return Container(
        width: _containerWidth,
        //padding: EdgeInsets.only(top: 2, bottom: 2),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                margin: EdgeInsets.only(left: 10),
                child: Text(list[index].name, style: _textStyle),
              )),
            //Expanded(child: Container()),
            Checkbox(
              value: list[index].selected,
              onChanged: (bool value) {
                print("$value  value");
                setState(() {
                  list[index].selected = value;
                });
                addRemoveFavHealth(value, list[index].id);
              },
            ),
          ],
        ),
      );
    },
  );
}

这将要求您在使用“ _dynamicListWidget”的地方需要期望Widget而不是List<Widget>

FLUTTER复选框的用户界面未更新

1 个答案: