我正在尝试实施一个listView
在我的应用程序中进行单选,这样一旦点击列表中的项目,按下的项目颜色状态就会与其他项目不同。我已经做了我所知道的一切,但效果并不好。问题是,即使我的实现在按下时更新每个项目的状态,它也不会将其他项目重置为其初始状态。
class BoxSelection{
bool isSelected;
String title;
String options;
BoxSelection({this.title, this.isSelected, this.options});
}
class _AddProjectState extends State<AddProject> {
List<BoxSelection> projectType = new List();
@override
void didChangeDependencies() {
super.didChangeDependencies();
projectType
.add(BoxSelection(title: "Building", isSelected: false, options: "A"));
projectType
.add(BoxSelection(title: "Gym House", isSelected: false, options: "B"));
projectType
.add(BoxSelection(title: "School", isSelected: false, options: "C"));
}
child: ListView.builder(
itemCount: projectType.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
//here am trying to implement single selection for the options in the list but it don't work well
for(int i = 0; i < projectType.length; i++) {
if (i == index) {
setState(() {
projectType[index].isSelected = true;
});
} else {
setState(() {
projectType[index].isSelected = false;
});
}
}
});
},
child: BoxSelectionButton(
isSelected: projectType[index].isSelected,
option: projectType[index].options,
title: projectType[index].title,
),
);
},
),
你的问题是你正在使用index
访问projectType
元素,但你应该使用i
if (i == index) {
setState(() {
projectType[i].isSelected = true;
});
} else {
setState(() {
projectType[i].isSelected = false;
});
}
无论如何,我认为您的代码可以改进,因为它没有达到应有的效率。您正在迭代整个列表并调用setState
每次迭代都会重复两次,当可以一次性完成时,会不必要地多次重新创建小部件树。
-
将当前选择保存在类级别变量中
BoxSelection _selectedBox
-
简化代码以直接对当前选择进行操作,而不是迭代整个列表
onTap: () =>
setState(() {
if (_selectedBox != null) {
_selectedBox.isSelected = false;
}
projectType[index].isSelected = !projectType[index].isSelected;
_selectedBox = projectType[index];
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)