[英]How to create a like button like using listview in flutter?
I am creating a blog app in flutter and stuck in a like button functionality.我正在 flutter 中创建一个博客应用程序,并坚持使用类似按钮的功能。 I want to do like(If a user presses the heart button in flutter listview, it will become red and when press again it will go in the original state) but when I click on the like button, color changes for all the buttons in the listview.
我想做喜欢(如果用户按下 flutter 列表视图中的心形按钮,它将变为红色,当再次按下时它将 go 处于原始状态)但是当我单击“喜欢”按钮时,所有按钮的颜色都会改变列表显示。 Here is my code snippet.
这是我的代码片段。
body: ListView.builder(
itemCount: 10,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(3.0, 3.0, 3.0, 0.0),
child: singleItem(index),
),
Divider(height: 0.5, color: Constants.greyColor),
],
);
},
),
Widget singleItem(int index) {
return ListTile(
leading: CircleAvatar(
radius: 25.0,
foregroundColor: Constants.orangeColor,
backgroundColor: Constants.orangeColor,
backgroundImage:
NetworkImage("https://png.pngtree.com/svg/20161113/ef1b24279e.png"),
),
trailing:
Text("Jul23", style: TextStyle(color: Constants.ligthGreyColor)),
title: Text("Jea @jeaBooty.jul23",
style: TextStyle(
color: Constants.slightBlackColor,
fontSize: 16.0,
fontWeight: FontWeight.w600)),
subtitle: Container(
margin: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Happy Birthday, hope you will have a wonderful Day"),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(Constants.commentIcon,
color: Constants.ligthGreyColor, size: 15.0),
),
SizedBox(width: 50.0),
IconButton(
onPressed: () {
if (!_isLike) {
setState(() {
_isLike = true;
color = Constants.orangeColor;
});
} else {
setState(() {
_isLike = false;
color = Constants.ligthGreyColor;
});
}
},
icon: Icon(Constants.crownIcon, color: color, size: 15.0),
),
],
),
),
],
),
),
);
} }
I guess as George Herbet mentioned in the comment, it seems like the same variable _isLike
and color
are used for all indices.我想正如评论中提到的 George Herbet 一样,似乎所有索引都使用了相同的变量
_isLike
和color
。
Perhaps you can keep the state of isLike
stored in a List
instead, ie List<bool> _likes
and then access the current one using the index, such as也许您可以将isLike的
isLike
保留在List
中,即List<bool> _likes
,然后使用索引访问当前的,例如
...
IconButton(
onPressed: () {
setState(() {
_likes[index] = !_likes[index];
});
}
},
icon: Icon(Constants.crownIcon, color: _likes[index] ? Constants.orangeColor :
Constants.ligthGreyColor, size: 15.0),
),
...
Define a List variable of type bool like here:定义一个 bool 类型的 List 变量,如下所示:
List<bool> _likes = List.filled(length,true);
Then change the IconButton with these parameters:然后使用以下参数更改 IconButton:
IconButton(
icon: _likes[index]
? Icon(Icons.favorite_border,
color: Colors.grey,)
: Icon(Icons.favorite,
color: Colors.red,) ,
onPressed: () {
setState(() {
_likes[index] = !_likes[index];
});
},)
You can use LikeButton widget.您可以使用 LikeButton 小部件。 This keep the index and have an animation.
这会保留索引并具有 animation。
Align(
alignment: Alignment.topRight,
child: LikeButton()
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.