注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下
如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识
专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html
目录
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%')
}
}