FLUTTER复选框UI未更新 [英] FLUTTER Checkbox UI not updating
问题描述
我有很多复选框，因为您可以看到上传的图像，请先查看该图像。
I have of many checkboxes as You can see the image uploaded, please see the image first.
现在的问题是，您可以看到3张卡片查看状况，过敏和过去的手术。并且所有这些卡都包含复选框，现在发生的情况是，当我选中或取消选中任何复选框时，CheckBox的UI不会更新为打勾或取消勾号，并且在构建方法之外还有复选框。
Now the problem is that you can see the 3 cards views Conditions, Allergies and Past Surgeries. and all of these cards contains checkboxes and now what happens is that when I check or uncheck any box the UI of the CheckBox doesn't update to tick or untick and I have checkboxes outside the build method.
有人可以让我知道我在做什么错，我也将共享复选框代码吗？
Can anyone let me know that what am I doing wrong and I will share the checkboxes codes also?
编辑
动态创建复选框
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是主体方法的列表。
In the build method, _mainList is the list of the MAINBODY METHOD.
推荐答案
您的问题是您要分配条件， for循环中的值，然后期望当您执行 setState 进行更改时，它将反映在原始值上条件列表。在这里，我有一个使用 ListView.builder 而不是 for循环和列的示例来产生相同的效果，但可以正确更改外部列表上变量的值，并且并行执行您的方法：
Your issue is that you are assigning your "condition" value inside the for loop and then expecting that when you do setState to change it, that it will reflect on the original list of conditions. Here I have an example of using a ListView.builder instead of a for loop with a column to produce the same effect, but correctly changing the value of the variable on the external list And in parallel your approach:
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;
}
}
如果您进行更改，您的代码应该可以使用
Your code should work if you change it to this:
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>
This would require that where you are using "_dynamicListWidget" needs to expect a Widget instead of a List<Widget>
这篇关于FLUTTER复选框UI未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
