我是 flutter 的新手,所以我试图构建一个可滚动的 listtile 对象。所以在构建它之后,我试图让 iconbutton 在按下时改变颜色,但当我按下一个按钮时,它会改变所有项目的颜色。我想这与为每个项目分配一个唯一的 id/key 有关,但我不确定这是否是问题,甚至不确定如何做到这一点。代码如下:
class Lists extends StatefulWidget {
@override
_ListsState createState() => _ListsState();
}
class _ListsState extends State<Lists> {
Color _statusColor = Colors.grey;
List<ItemLists> items = [
ItemLists(
title: 'Best Music of the Year',
discription: 'Davido',
),
ItemLists(
title: 'Best Album Cover design',
discription: 'Brighter Press',
),
ItemLists(
title: 'Best Vocalist',
discription: 'Simi-Sola',
),
];
@override
Widget build(BuildContext context) {
return Column(
children: items.map(
(items) {
return Container(
child: Card(
child: ListTile(
leading: new IconButton(
icon: Icon(
Icons.star,
color: _statusColor,
),
tooltip: 'Add to Favorite',
onPressed: () {
setState(() {
if (_statusColor == Colors.grey) {
_statusColor = Colors.green;
} else {
_statusColor = Colors.grey;
}
});
}),
title: Text('${items.title}'),
subtitle: Text('${items.discription}'),
trailing: IconButton(icon: Icon(Icons.delete), onPressed: null),
)));
},
).toList());
}
}
提前致谢。
以下是修改后的代码
class Lists extends StatefulWidget {
@override
_ListsState createState() => _ListsState();
}
class _ListsState extends State<Lists> {
Color _statusColor = Colors.grey;
List<ItemLists> items = [
ItemLists(
title: 'Best Music of the Year',
discription: 'Davido',
favorite: false,
),
ItemLists(
title: 'Best Album Cover design',
discription: 'Brighter Press',
favorite: false,
),
ItemLists(
title: 'Best Vocalist',
discription: 'Simi-Sola',
favorite: false,
),
];
@override
Widget build(BuildContext context) {
return Column(
children: items.map(
(items) {
return Container(
child: Card(
child: ListTile(
leading: new IconButton(
icon: Icon(
Icons.star,
color: items.favorite ? Colors.green : Colors.grey,
),
tooltip: 'Add to Favorite',
onPressed: () {
setState(() {
items.favorite = !items.favorite;
});
}),
title: Text('${items.title}'),
subtitle: Text('${items.discription}'),
trailing: IconButton(icon: Icon(Icons.delete), onPressed: null),
)));
},
).toList());
}
}
下面是我的数据模型
class ItemLists {
String title;
String discription;
bool favorite;
ItemLists({this.title, this.discription, this.favorite});
}
我正在尝试做的是一个 Todo 应用程序,当用户完成特定任务时,他或她可以轻松地单击星形图标按钮。
答案 0 :(得分:1)
那是因为您只有一个颜色变量分配给列表中的所有项目;如果该变量发生变化,所有项目也会发生变化。
有不同的方法来解决这个问题;一种可能的解决方案是向您的“itemlists”对象添加另一个属性:
List<ItemLists> items = [
ItemLists(
title: 'Best Music of the Year',
discription: 'Davido',
favorite: false, // add this as a boolean to indicate if the item is a favorite or not
),
然后像这样更改您的卡:
return Container(
child: Card(
child: ListTile(
leading: new IconButton(
icon: Icon(
Icons.star,
color: items.favorite ? Colors.green : Colors.grey, // change this
),
tooltip: 'Add to Favorite',
onPressed: () {
setState(() {
items.favorite = !items.favorite; // and change this
});
}),
title: Text('${items.title}'),
subtitle: Text('${items.discription}'),
trailing: IconButton(icon: Icon(Icons.delete), onPressed: null),
)));
这应该有效。