2.头部导航界面搭建

{Image($r(sys.media.ohos_ic_compnent_titlebar_back)).width(100%).aspectRatio(1)}.width(24).padding(4).borderRadius(12).backgroundColor(#f5f7f8)Text(评论回复)//先设置占页面的100%

然后在居中对齐.width(100%).textAlign(TextAlign.Center)}.width(100%).padding(20)}

}export

}上述UI界面搭建很简单但要注意一点就是在有了返回按钮的情况下如何让评论回复在整行居中我们可以采用Stack布局或者是在右边也放置一个宽度为24的容器

3.评论项搭建

{Image($r(app.media.Cover1)).width(60).borderRadius(30)Column({

space:

{Text(遇到困难睡大觉).fontSize(18).fontWeight(700)Text(你已经是一个成熟的评论了要学会自己打破零回复).fontSize(18)Row()

{Row()

属地安徽).fontColor(#ffcfcfcf)}Row({

space:

{Image($r(app.media.love)).width(24).aspectRatio(1)Text(100).fontColor(#ffcfcfcf)}}.width(100%).justifyContent(FlexAlign.SpaceBetween)}.layoutWeight(1).alignItems(HorizontalAlign.Start)}.width(100%).padding(20).height(120).alignItems(VerticalAlign.Top)}

}export

(7))}.padding(12).border({width:

{top:

rgb(246,246,246)}).width(100%)4.1.2

评论列表

https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source06d4cd63,author:

偏执狂-妄想家,content:

https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source32738c0c,author:

William,content:

https://picx.zhimg.com/v2-e6f4605c16e4378572a96dad7eaaf2b0_l.jpg?source06d4cd63,author:

Andy

欧洲杯其实16队球队打正赛已经差不多24队打正赛意味着正赛阶段在小组赛一样有弱队。

,time:

11-28,area:

https://picx.zhimg.com/v2-53e7cf84228e26f419d924c2bf8d5d70_l.jpg?source06d4cd63,author:

正宗好鱼头,content:

https://pic1.zhimg.com/v2-eeddfaae049df2a407ff37540894c8ce_l.jpg?source06d4cd63,author:

柱子哥,content:

我是支持扩大的亚洲杯欧洲杯扩到32队扩到64队才是好的世界上有超过200支队伍欧洲区55支队伍亚洲区47支队伍即使如此也就六成出现率,time:

11-27,area:

https://picx.zhimg.com/v2-fab3da929232ae911e92bf8137d11f3a_l.jpg?source06d4cd63,author:

飞轩逸,content:

禁止欧洲杯扩军之前应该先禁止扩军或者至少把亚洲名额一半给欧洲。

,time:

11-26,area:

item,//但凡传函数吧必须用箭头函数包裹changeLike:(id:number){this.changeLike(id)}})}})}.layoutWeight(1)这里需要注意几点

List里面必须放置ListItem()评论列表的高度可以给一个自适应这样可以让列列表超出屏幕的高度时实现自适应

实现任务当我们点击爱心或者点赞的时候点赞数量1爱心变位红色当我们再次点击点赞由原来的点赞变为取消点赞爱心的颜色变为灰色点赞的数量-1

代码层面分析由于我们显示的数据是由主界面传到子界面的所以我们需要在父界面定义一个方法传递到子面去在子界面去调用这个方法所以在子界面需要有一个接受的方法

5.1.1

//点赞逻辑处理changeLike(id:number){//遍历数组

对commentlist数组中的每一个元素item进行迭代const

index

this.commentList.findIndex(item

item.id

0){//处理主评论if(this.comment.likeFlag){//已经点赞this.comment.likeNum

//点赞数量--}else

{//未点赞//点赞数量this.comment.likeNum}this.comment.likeFlag

!this.comment.likeFlag}else{//处理回复评论

找到回复列表中的某一个子评论//返回第一次匹配元素的数组索引(0~N)if(this.commentList[index].likeFlag){this.commentList[index].likeNum--}else

{this.commentList[index].likeNum}this.commentList[index].likeFlag

!this.commentList[index].likeFlag//State修饰的数据只能监听到第一层或者本身

需要new一下在使用this.commentList[index]

new

ReplyItemModel(this.commentList[index])//

this.commentList.splice(index,1,this.commentList[index])}

5.1.3父界面进行传值

publishComment(content:string){this.commentList.unshift(new

ReplyItemModel({//

Math.random()的作用是生成一个基于随机数的临时唯一标识但需注意//

数值范围:

https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source06d4cd63,author:

遇到困难睡大觉,content:

{this.publish(this.content)this.content

{this.publish(this.content)this.content

this.conmentsnum})}.width(100%).padding(12)}

}export