如何在flutter中激活和停用喜爱的图标

Question

我想为每个项目激活和停用收藏夹图标因为我现在得到的是填充图标，但同时，它没有得到停用。

bool isPressed=false;
new GestureDetector(
onTap: () {
setState(() => isPressed = true);
},
child: Icon(Icons.favorite_sharp,
// color: Colors.redAccent,
color: (isPressed)
? Colors.red
: Colors.black12)),

现在激活和去激活都在工作，但在选择单个收藏夹图标时，它会显示所选的所有收藏夹图标。

ListView.builder(
itemCount: infoList.length,
itemBuilder: (BuildContext context, int index) {
Info info = new Info(
"${infoList[index].id}",
"${infoList[index].name}",
"${infoList[index].image}",
"${infoList[index].thumb}",
"${infoList[index].catagory}",
"${infoList[index].price}",
"${infoList[index].qty}",
);
return new Card(
margin: EdgeInsets.fromLTRB(5, 0, 5, 5),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: ClipRRect(
child: ListTile(
leading: Container(
child: Image.network("${infoList[index].image}")),
title: Text(
"${infoList[index].name}",
style: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 14,
color: Colors.black),
),
subtitle: Text(
"$ ${infoList[index].price}",
style: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 14,
color: Colors.black),
),
trailing: Wrap(
spacing: 12,
children: [
GestureDetector(
onTap: () {
setState(() => isPressed = !isPressed);
},
child: Icon(Icons.favorite_sharp,
// color: Colors.redAccent,
color: (isPressed)
? Colors.red
: Colors.black12)),
// Icon(
//   Icons.add_shopping_cart,
//   color: Colors.white,
// ),
],
),

Answer 1

您需要更改onTap才能真正切换：

onTap: () {
setState(() => isPressed = !isPressed);
},

Answer 2

我刚刚在isPressed变量中添加了一个"_"，因为将此类变量保留为私有变量是一种很好的做法。

即

is按下->公共

_is按下->私人

bool _isPressed = false;
GestureDetector(
onTap: () {
setState(() => _isPressed = !_isPressed);
},
child: Icon(Icons.favorite_sharp,
color: _isPressed ? Colors.red : Colors.black12)),

要使每个widget处于选中状态，您必须将其制作成一个单独的Stateful Widget，然后将其传递到ListView。

一旦你做到了，现在每个widget都有自己的state，它们可以单独选择/取消选择。

编辑

将Card Widget转换为另一个StateFull widget

例如

class CardWidget extends StatefulWidget {
final Info info;
CardWidget(this.info);
@override
_CardWidgetState createState() => _CardWidgetState();
}
class _CardWidgetState extends State<CardWidget> {

bool _isPressed = false;
@override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.fromLTRB(5, 0, 5, 5),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: ClipRRect(
child: ListTile(
leading: Container(
child: Image.network("${widget.info.image}")),
title: Text(
"${widget.info.name}",
style: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 14,
color: Colors.black),
),
subtitle: Text(
"$ ${widget.info.price}",
style: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 14,
color: Colors.black),
),
trailing: Wrap(
spacing: 12,
children: [
GestureDetector(
onTap: () {
setState(() => _isPressed = !_isPressed);
},
child: Icon(Icons.favorite_sharp,
// color: Colors.redAccent,
color: (isPressed)
? Colors.red
: Colors.black12)),

// Icon(
//   Icons.add_shopping_cart,
//   color: Colors.white,
// ),
],
),

现在使用CardWidget来填充ListView。只需记住将所有值传递给小部件，如下所示。

ListView.builder(
itemCount: infoList.length,
itemBuilder: (BuildContext context, int index) {
Info info = new Info(
"${infoList[index].id}",
"${infoList[index].name}",
"${infoList[index].image}",
"${infoList[index].thumb}",
"${infoList[index].catagory}",
"${infoList[index].price}",
"${infoList[index].qty}",
);
return CardWidget(info);