Skip to Content

评论功能

新版界面:评论功能从视频 41:40 开始,建议结合视频前半部分的点赞一起学习。

文字版操作步骤(旧版界面)

我们可以参考微信的评论,就是点击评论组件我们就可以评论,这里我们要思考怎么出现这个评论框,这边直接说明就是用行为中的显示对话框。 具体操作如下:

第一步:先摆放组件

评论组件摆放示意图

图片加上文字放在视图中即可。

第二步:设置点击时行为—显示对话框

评论对话框行为配置

模式为自定义。

自定义评论对话框样式

第三步:调整样式

评论样式调整示意图

第四步:配置数据

我们的元器件摆放就告一段落,接下来我们要思考的问题就是我可以评论这个朋友圈,你也可以回复我的评论,这时候我们就要用到自关联表。

自关联表就是自己关联自己
举个例子,当你在买肉类的时候,你买的鸡腿属于鸡这个类别,但是鸡又属于禽类,这时候就相当于鸡腿上面还有两个类别,在设计数据模型的时候我们可以用两张表关联,但是如果上级分类是无限的呢,那就不太好解决了,这里就要用到自关联表了。

这里的评论表就类似于无限套娃,所以需要用到自关联表,自己对自己执行一对多,但是要注意外键的可读性,不然折后的关系绑定就会很复杂,这里给出一个实例

自关联表示例

接下来就是我评论了是要呈现出来的,那我们就需要存放这些评论,就需要一张表—评论表

评论表结构示意图

具体的关系如上图所示。 有了这个表就可以了。

第五步:设置点击回复按钮时的行为请求

修改表数据—添加评论表。 具体情况如下

修改表数据示意图

这里面不用管上级回复,因为没有回复对象,你回复的是这个朋友圈。但是细心的小伙伴会发现我这边朋友圈的外键使用了页面数据,为什么呢?因为我这边需要让回复的时候定位到这一条朋友圈,也为了后续回复的方便,所以就设置了页面数据。

添加页面数据设置页面数据
添加页面数据示意图设置页面数据示意图

第六步:设置并在点击时行为设置赋值

当然不要忘了一件事,就是之前我们那个按钮的修改表数据添加评论后需要成功时的刷新和隐藏对话框以及设置输入框的值,这里我建议初次的小伙伴把这个记下来。

刷新和隐藏对话框设置示意图

这边就是三个让页面恢复到原来的样子。

第七步:添加评论列表

初次评论我们已经做完了,然后我们摆放一个评论的列表来展示我们的评论。

评论列表组件示意图

这边为什么设置这么小是因为我们本来的朋友圈就不会显示多大,并且在没有评论的时候就不显示,这样更美观也更加符合预期,可以把最小高度设置为 0,反正垂直布局模式选择了适应内容。

第八步:设置点击评论回复

点击这一项然后和初次评论也差不多,但是唯一不同的是我们这里要设置两个页面数据,一个是朋友圈的 id 另一个是评论的 id,这里的原因是因为 Zion 有一些限制,那个限制呢,我来展示一下。

行为配置行为配置行为配置
点击评论回复行为配置示意图设置评论回复页面数据示意图评论回复成功后刷新示意图

这里面的上级评论表你不可以绑定为项数据评论项,因为这是工程部设置死的。 你只能通过页面数据来传输你的评论项。

第九步:配置成功时的刷新

评论成功后刷新设置示意图

这样评论功能的配置就完成了。

Last updated on