我想在这个 Flutter 博客应用中添加一个赞按钮

Posted 2023-02-23

【中文标题】我想在这个 Flutter 博客应用中添加一个赞按钮

【英文标题】：I'd like to add a like button to this flutter blog app

【发布时间】：2020-06-17 15:39:26

【问题描述】：

这个项目可以在这里找到：https://github.com/Santos-Enoque/flutter_blog_app

到目前为止，我已将它连接到 firebase 实时数据库，并且运行良好。我正在尝试向列出所有帖子的主页（lib/screens/home.dart）添加一个赞按钮。

主页使用带有 ListTile 的卡片显示博客结果。 ListTile 卡的尾随属性已被使用，因此我想使用 ListTile 卡的前导属性来显示一个收藏图标，该图标在点击时会增加一个计数器++，并将结果保存到 Firebase。就像 Facebook 的点赞按钮一样。 下面是代码：

                          child: Card(
                            child: ListTile(
                              title: ListTile(
                                onTap: ()
                                  _incrementCounter();                                
                                ,

                                leading: FittedBox(
                                  fit: BoxFit.fitWidth,
                                  child: Row(
                                    children: <Widget>[
                                      Icon(Icons.favorite),
                                      Text(postsList[index].counter.toString()
                                      ),
                                    ],
                                  ),
                                  ),

                                title: Text(
                                  postsList[index].title,
                                  style: TextStyle(
                                      fontSize: 16.0, fontWeight: FontWeight.bold),
                                ),
                                trailing: Text(
                                  timeago.format(DateTime.fromMillisecondsSinceEpoch(postsList[index].date)),
                                  style: TextStyle(fontSize: 12.0, color: Colors.grey),
                                ),

                              ),
                              subtitle: Padding(
                                padding: const EdgeInsets.only(bottom: 14.0),
                                child: Text(postsList[index].body, style: TextStyle(fontSize: 14.0),),
                              ),
                            ),
                          ),

这是 _increment 计数器代码：

    try 
      var ref = FirebaseDatabase.instance.reference().child('posts/postId/counter');
      await ref.once().then((data) async => 
        await ref.set(data.value + 1),

      );
     catch (e) 
      print(e.message);
    
  

![博客首页]https://photos.google.com/share/AF1QipMK6C-Wx2vZHHbE2jDMQsfYNnwl9OWK_5W8OKOfiIChcXt-gnWnCH7ba_EpyRnRAA?key=cGxkRkVSSk9PQTdtTXB0MzZBRDNHNUVzSGxlcDVB

博客文章显示为图片中的卡片......我试图在卡片（前导）的左侧添加一个图标，每次有人点击该图标时都会增加一个值。类似于 facebook 上的点赞按钮。并将数据保存到 firebase 实时数据库。

非常感谢任何帮助...谢谢大家！

【问题讨论】：

提供您的具体要求。需要清晰.........

@Kit Mateyawa 因为您的问题是关于 UI，请添加您所在位置的快照或模拟图片，以及您希望它是什么。另外，清楚地说明您接下来要做什么，以及您的阻止者在哪里。关于代码，只贴出与这个问题相关的部分代码，以便我们实际帮助您

抱歉，我修复了链接

【参考方案1】：

我认为您可能想要做的是将此功能添加到您的 onPressed.您还需要将图标旁边的文本设置为等于读取的新值。

void like() async 
    try 
      var ref = FirebaseDatabase.instance.reference().child('path to likes for a post');
      await ref.once().then((data) async => 
        await ref.set(data.value + 1);
      );
     catch (e) 
      print(e.message);
    
  

希望这会有所帮助。

P.S.- 你可以找到这个使用视频：https://www.youtube.com/watch?v=l8_7RTRRmHo

【讨论】：

您好，感谢您的回复，我设法解决了 UI 问题，但无法正常工作。请看一下。我的完整代码在这里：[link]github.com/kitmt/cmfiflutterapp/blob/master/lib/prayer/screens/…谢谢！

打印时显示所有帖子：I/flutter (31567): date: 1583412633724, counter: 5, body: yes maybe you can see, title: kindly I/flutter (31567): date: 1583499007444, counter: 12, body: Thanks, title: Kind I/flutter (31567): date: 1583499929773, counter: 0, body: yes maybe you should know, title: thanks I/flutter (31567): date: 1583501476104, counter: 0, body: I'm blessed, title: what are you I/flutter (31567): date: 1583503757100, counter: 0, body: hd DTH jii, title: h HCG hh 但计数器未连接到firebase ...当我点击卡片时，加值不会增加

github.com/kitmt/cmfiflutterapp/blob/master/lib/prayer/models/…

github.com/kitmt/cmfiflutterapp/blob/master/lib/prayer/db/…

啊哈，引用（上面代码中的ref）需要设置为var ref = FirebaseDatabase.instance.reference().child('posts/postId/counter'); 其中postId是键值对的键，其值为用户拥有的Post对象轻按。

【参考方案2】：

感谢所有为此提供帮助的人：

用户界面代码：

leading: FittedBox(
          fit: BoxFit.fitWidth,
           child: Row(
            children: <Widget>[
            Icon(Icons.favorite),
            Text(postsList[index].counter.toString()
                  ),
                 ],
                ),
            ),

函数代码：

onTap: ()
     _incrementCounter(postsList[index].key);

...

void _incrementCounter(key) async 
    try 
      var ref = FirebaseDatabase.instance.reference().child('posts/'+ key +'/counter');
      await ref.once().then((data) async => 
        await ref.set(data.value + 1),
      );
     catch (e) 
      print(e.message);