如何像在颤动中使用列表视图一样创建一个喜欢的按钮？答案

【问题标题】：How to create a like button like using listview in flutter?如何像在颤动中使用列表视图一样创建一个喜欢的按钮？
【发布时间】：2020-01-25 20:17:30
【问题描述】：

我正在用 Flutter 创建一个博客应用程序，并停留在类似按钮的功能中。我想做喜欢（如果用户在颤动列表视图中按下心脏按钮，它会变成红色，再次按下时它将进入原始状态）但是当我点击喜欢按钮时，所有按钮的颜色都会改变列表显示。这是我的代码 sn-p。

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),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);

}

【问题讨论】：

我猜你正在为该小部件的所有实例设置 _isLike 和 color 为 true。我建议发布一个最低限度的应用程序，这样我们就可以看到你在做什么。
这是一个单页应用程序。我正在练习创建一个类似的按钮。我担心的是，当我按下“赞”按钮时，如何为列表视图中的特定项目赋予颜色？
感谢@GeorgeHerbert

标签： listview button flutter dart

【解决方案1】：

我想正如评论中提到的 George Herbet 所说，似乎所有索引都使用了同一个变量_isLike 和 color。

也许您可以将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),
),
...

【讨论】：

【解决方案2】：

定义一个 bool 类型的 List 变量，如下所示：

List<bool> _likes = List.filled(length,true);

然后使用以下参数更改 IconButton：

    IconButton(
icon: _likes[index] 
 ? Icon(Icons.favorite_border,
        color: Colors.grey,)
 : Icon(Icons.favorite,
        color: Colors.red,) ,
onPressed: () {
  setState(() {
               _likes[index] = !_likes[index];
                                              });
           },)

【讨论】：