如何在颤振中循环图标?

Question

我有数据列表，我想声明每个列表都有一个图标...每当用户单击该图标时。该图标将更改为另一个图标。这是代码

ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
ListTile(
leading: InkWell(
onTap: () {
setState((){
match=true;
});
},
child: 
match
? Icons.check
: Icons.error
),
title: Text(data[index],),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text("subs here.."),
],
),
],
),
),
],
);
}),

从该代码.. 用户单击第一个图标后...列表视图生成器中的所有图标都已更改。有没有办法只更改我点击的图标(不是所有图标(的图标？

Answer 1

您可以维护所选列表小部件的索引，就像您对匹配变量所做的那样

setState((){
match=true;
_index = index;
});

然后添加一个条件，例如

match && _index == index
? Icons.check
: Icons.error
),

Answer 2

将列表项分隔在其自己的有状态小部件中，以便每个列表项都可以保持自己的状态。

class ListItem extends StatefulWidget {
@override
_ListItemState createState() => _ListItemState();
}
class _ListItemState extends State<ListItem> {
bool match = false;
@override
Widget build(BuildContext context) {
return ListTile(
leading: InkWell(
onTap: () {
setState(() {
match = true;
});
},
child: Icon(match ? Icons.check : Icons.error)),
title: Text(
"asd",
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text("subs here.."),
],
),
],
),
);
}
}

将小组件添加到列表视图

itemBuilder: (context, index) {
return ListItem();
}