flutter - 颤振复选框 UI 未更新

问题描述

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

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

谁能让我知道我做错了什么，我也会分享复选框代码吗？

编辑

动态创建复选框

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

在 build 方法中，_mainList 是 MAINBODY METHOD 的列表。

标签： fluttercheckboxflutter-layout

解决方案

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

查看 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”的地方需要期待 aWidget而不是 aList<Widget>

flutter - 颤振复选框 UI 未更新

问题描述

解决方案

推荐阅读