鸿蒙 NEXT 开发 - 知乎评论小案例
作者：东林知识库
- 2025-03-31 江苏
本文字数：5965 字
阅读完需：约 20 分钟
1. 基本介绍
知乎评论小案例一共包含两个页面，分别是首页和评论页面，首页包含了知乎人家发的内容信息，从内容点击进去就可以访问到对应内容的评论，用户可以发送评论
1.1 首页图
首页展示 app 里面的所有内容，内容里面包含了用户的头像、内容封面、内容、日期、IP 等信息
编辑
1.2 评论页图
评论页面里面包含了当前内容的评论回复，评论数量、点赞数，发布评论功能
编辑
2. 分解组件
2.1 新增导航栏组件
在编辑器里面新建一个文件目录叫 components，然后新建 NavBarComponent.ets 文件
import { router } from '@kit.ArkUI'
@Preview @Component export default struct NavBarComponent { title: string = "标题"
build() { Row() { // 返回键 Row() { Image($r('app.media.back')) .width(16) .height(16) } .width(30) .height(30) .borderRadius(15) .backgroundColor("#f4f4f4") .justifyContent(FlexAlign.Center) .margin({ left: 20 }) .onClick(() => { router.back() })
Text(this.title) .layoutWeight(1) .textAlign(TextAlign.Center) .margin({ right: 50 }) } .width('100%') .height(50) .border({ color: "#f4f5f6", width: { bottom: 1 } }) } }
复制代码
2.2 新增首页内容组件
在 components 文件目录下面新建一个 ContentComponent.ets 文件
import ContentModel from '../model/ContentModel'
@Preview @Component export default struct ContentComponent { @State item: ContentModel = new ContentModel(1, 'https://p6-passport.byteacctimg.com/img/user-avatar/d7ad5f39e86149d511489a5cdec341d5~100x100.awebp', '东林知识库', '本库是个人学习的时候记录的笔记 对 Java 的一些基础知识、数据库知识、以及框架知识进行收集、整理（持续更新中）', $r('app.media.content'), '10-30', '合肥' )
build() { Row({ space: 10 }) { Image(this.item.avatar) .width(40) .height(40) .borderRadius(20)
Column({ space: 10 }) { Text(this.item.author) .fontColor("#303a43") .fontSize(18) .fontWeight(FontWeight.Bold)
Text(this.item.content) .fontColor("#2f3642") .lineHeight(22) Row() { Text(`${this.item.time} .IP属地${this.item.area}`) .fontColor("#cacaca") .fontSize(12)
Image(this.item.images) .width(80) .height(60) } .justifyContent(FlexAlign.SpaceBetween) .width('100%') } .alignItems(HorizontalAlign.Start) .layoutWeight(1)
} .alignItems(VerticalAlign.Top) .padding(20) .width('100%') } }
复制代码
2.3 新增评论组件
在 components 文件目录下面新建 CommentItemComponent.ets 文件
import ReplyItemModel from '../model/ReplyItemModel'
@Preview @Component export default struct CommentItemComponent { @State item: ReplyItemModel = new ReplyItemModel(1, 'https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source=06d4cd63', '小花', '谁能爱我一次哈哈', '11-30', '海南', 34, false )
build() { Row({ space: 10 }) { Image(this.item.avatar) .width(40) .height(40) .borderRadius(20)
Column({ space: 10 }) { Text(this.item.author) .fontColor("#303a43") .fontSize(18) .fontWeight(FontWeight.Bold)
Text(this.item.content) .fontColor("#2f3642") .lineHeight(22) Row() { Text(`${this.item.time} .IP属地${this.item.area}`) .fontColor("#cacaca") .fontSize(12)
Row({ space: 4 }) { Image($r("app.media.like")) .width(40) .height(30) .fillColor("#cacaca")
Text(this.item.likeNum.toString()) .fontColor("#cacaca") .fontSize(12)
} } .justifyContent(FlexAlign.SpaceBetween) .width('100%') } .alignItems(HorizontalAlign.Start) .layoutWeight(1)
} .alignItems(VerticalAlign.Top) .padding(20) .width('100%') } }
复制代码
2.4 新增评论回复组件
在 components 文件目录下面新建 ReplyInputComponent.ets 文件
import ReplyItemModel from '../model/ReplyItemModel'
@Component export default struct ReplyInputComponent { @Link contentList: ReplyItemModel[] @State content: string = ''
build() { Row({ space: 10 }) { TextInput({ text: $$this.content, placeholder: '～请留下您的神评论' }) .layoutWeight(1) .height(40) Button("发布") .onClick(() => { if (this.content) { this.contentList.push(new ReplyItemModel(Math.random(), 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1bad8264-7428-44cf-a92d-3016a2de537b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711626934&t=5478cb3adef5d3e29e6952934797ca39', '东林', this.content, '10-30', '山东', 31, false )) this.content = "" } }) } .padding({ left: 10, right: 10 }) .width('100%') .height(60) } }
复制代码
3. 新增实体类
3.1 内容实体类
在编辑器里面新建一个 model 文件目录，在这个文件目录下面新建 ContentModel.ets 文件
export default class ContentModel { id: number = 0 avatar: string = '' author: string = '' content: string = '' images: string | Resource = '' time: string = '' area: string = ''
constructor(id: number, avatar: string, author: string, content: string, images: string | Resource, time: string, area: string) { this.id = id this.avatar = avatar this.author = author this.content = content this.time = time this.area = area this.images = images }}
复制代码
3.2 回复实体类
在 model 文件目录下面新建 ReplyItemModel.ets 文件
export default class ReplyItemModel { id: number = 0 avatar: string = '' author: string = '' content: string = '' time: string = '' area: string = '' likeNum: number = 0 likeFlag: boolean = false
constructor(id: number, avatar: string, author: string, content: string, time: string, area: string, likeNum: number, likeFlag: boolean) { this.id = id this.avatar = avatar this.author = author this.content = content this.time = time this.area = area this.likeNum = likeNum this.likeFlag = likeFlag }}
复制代码
4. 新增页面
4.1 详情页
在文件目录 pages 下面新建 Detail.ets 的页面，代码如下展示
4.1.1 代码如下
import NavBarComponent from '../components/NavBarComponent'import CommentItemComponent from '../components/CommentItemComponent'import ReplyItemModel from '../model/ReplyItemModel'import ReplyInputComponent from '../components/ReplyInputComponent'
@Entry @Component struct Detail {
@State commentList: ReplyItemModel[] = [ new ReplyItemModel(1, 'https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source=06d4cd63', '小花', '谁能爱我一次哈哈', '11-30', '海南', 34, false ), new ReplyItemModel(2, 'https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source=32738c0c', '东林', '东林大王来了', '11-30', '北京', 100, true ),
new ReplyItemModel(3, 'https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source=32738c0c', '小妹', '今天吃香蕉', '11-30', '北京', 100, true ), new ReplyItemModel(4, 'https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source=32738c0c', '大王', '我要好好学习报效国家', '11-30', '北京', 100, true ), ]
build() { Column() { NavBarComponent({ title: '评论回复' }) Divider().strokeWidth(6) Row() { Text("评论数50") } .width('100%') .height(50) .padding({ left: 20 }) .border({ color: '#f3f4f5', width: { bottom: 1 } })
List() { ForEach(this.commentList, (item: ReplyItemModel) => { ListItem() { CommentItemComponent({ item }) } }, (item: ReplyItemModel) => item.id.toString()) }.layoutWeight(1)
ReplyInputComponent({ contentList: this.commentList })
} } }
复制代码
4.2 首页页面
在文件目录 pages 下面修改 Index.ets 页面，代码如下
4.2.1 代码如下
import ContentComponent from '../components/ContentComponent'import ContentModel from '../model/ContentModel'import { router } from '@kit.ArkUI'
@Entry @Component struct Index { @State content: ContentModel = new ContentModel(1, 'https://p6-passport.byteacctimg.com/img/user-avatar/d7ad5f39e86149d511489a5cdec341d5~100x100.awebp', '东林知识库', '本库是个人学习的时候记录的笔记 对 Java 的一些基础知识、数据库知识、以及框架知识进行收集、整理（持续更新中）', 'https://p6-passport.byteacctimg.com/img/user-avatar/d7ad5f39e86149d511489a5cdec341d5~100x100.awebp', '10-30', '合肥', )
build() { Column() { Text('我是知乎首页') List() { ForEach([1, 2, 3, 4, 5, 6, 7], () => { ListItem() { ContentComponent({ item: this.content }) .onClick(() => { router.pushUrl({ url: 'pages/Detail' }) }) } })
}
} .justifyContent(FlexAlign.Start) .width('100%') .height('100%')
} }
复制代码
划线
评论
复制
发布于: 3 小时前阅读数: 8
版权声明: 本文为 InfoQ 作者【东林知识库】的原创文章。
原文链接:【http://xie.infoq.cn/article/d3d68f80d423d8413bf47fd19】。文章转载请联系作者。
东林知识库
关注
享受当下，享受生活，享受成长乐趣！ 2025-02-26 加入
鸿蒙、Java、大数据
评论