百度做网站联系电话,html旅游网站模板,建设网站投资多少钱,网站开发的硬件环境要求注意#xff1a;博主有个鸿蒙专栏#xff0c;里面从上到下有关于鸿蒙next的教学文档#xff0c;大家感兴趣可以学习下
如果大家觉得博主文章写的好的话#xff0c;可以点下关注#xff0c;博主会一直更新鸿蒙next相关知识
专栏地址: https://blog.csdn.net/qq_56760790/…注意博主有个鸿蒙专栏里面从上到下有关于鸿蒙next的教学文档大家感兴趣可以学习下
如果大家觉得博主文章写的好的话可以点下关注博主会一直更新鸿蒙next相关知识
专栏地址: https://blog.csdn.net/qq_56760790/category_12794123.html 目录
1. 基本介绍
1.1 首页图
1.2 评论页图 2. 分解组件
2.1 新增导航栏组件
2.2 新增首页内容组件
2.3 新增评论组件
2.4 新增评论回复组件
3. 新增实体类
3.1 内容实体类
3.2 回复实体类
4. 新增页面
4.1 详情页
4.1.1 代码如下
4.2 首页页面
4.2.1 代码如下
5. 学习地址
1. 基本介绍
知乎评论小案例一共包含两个页面分别是首页和评论页面首页包含了知乎人家发的内容信息从内容点击进去就可以访问到对应内容的评论用户可以发送评论 1.1 首页图
首页展示app里面的所有内容内容里面包含了用户的头像、内容封面、内容、日期、IP等信息 1.2 评论页图
评论页面里面包含了当前内容的评论回复评论数量、点赞数发布评论功能 2. 分解组件 2.1 新增导航栏组件 在编辑器里面新建一个文件目录叫components然后新建NavBarComponent.ets文件
import { router } from kit.ArkUIPreviewComponentexport 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/ContentModelPreviewComponentexport 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/ReplyItemModelPreviewComponentexport default struct CommentItemComponent {State item: ReplyItemModel new ReplyItemModel(1,https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source06d4cd63,小花,谁能爱我一次哈哈,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/ReplyItemModelComponentexport 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/srchttp%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1bad8264-7428-44cf-a92d-3016a2de537b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpgreferhttp%3A%2F%2Fsafe-img.xhscdn.comapp2002sizef9999,10000qa80n0g0nfmtauto?sec1711626934t5478cb3adef5d3e29e6952934797ca39,东林,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 0avatar: 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 idthis.avatar avatarthis.author authorthis.content contentthis.time timethis.area areathis.images images}
}
3.2 回复实体类
在model文件目录下面新建ReplyItemModel.ets文件
export default class ReplyItemModel {id: number 0avatar: string author: string content: string time: string area: string likeNum: number 0likeFlag: boolean falseconstructor(id: number, avatar: string, author: string, content: string, time: string, area: string, likeNum: number,likeFlag: boolean) {this.id idthis.avatar avatarthis.author authorthis.content contentthis.time timethis.area areathis.likeNum likeNumthis.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/ReplyInputComponentEntryComponentstruct Detail {State commentList: ReplyItemModel[] [new ReplyItemModel(1,https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source06d4cd63,小花,谁能爱我一次哈哈,11-30,海南,34,false),new ReplyItemModel(2,https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source32738c0c,东林,东林大王来了,11-30,北京,100,true),new ReplyItemModel(3,https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source32738c0c,小妹,今天吃香蕉,11-30,北京,100,true),new ReplyItemModel(4,https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source32738c0c,大王,我要好好学习报效国家,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.ArkUIEntryComponentstruct 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%)}}
5. 学习地址
全网首发鸿蒙NEXT星河版零基础入门到实战2024年最新版企业级开发视频陆续更新中_哔哩哔哩_bilibili
