鸿蒙NEXT开发-知乎评论小案例（基于最新api12稳定版）

server/2024/10/18 14:00:37/

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙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.ArkUI'@Preview@Componentexport 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@Componentexport 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@Componentexport 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'@Componentexport 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 = 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/ReplyInputComponent'@Entry@Componentstruct 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@Componentstruct 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


http://www.ppmy.cn/server/131728.html

相关文章

【零散技术】MAC 安装多版本node

【零散技术】MAC 安装多版本node

时间是我们最宝贵的财富,珍惜手上的每个时分 不同前端项目运行的node版本不一致，会导致无法运行，就像Odoo也需要依据版本使用对应的python环境。python 可以用 conda随时切换版本，那么Node可以吗？答案是肯定的。 1、安装 n&#x…
阅读更多...
llvm开发心得

llvm开发心得

llvm使用心得 常用llvm命令 # 将.c编译为bitcode clang -emit-llvm -c test.c# 将bitcode反汇编为ir llvm-dis test.bc# 将ir转成bitcode llvm-as test.ll# 用lli执行bitcode或ir lli test.bc lli test.ll# llc将bitcode或ir转成目标汇编 llc test.bc llc test.ll# as将汇编转…
阅读更多...
鸿蒙--下拉刷新+上拉加载

鸿蒙--下拉刷新+上拉加载

概述 Refresh组件支持下拉刷新，包裹list组件，下拉事件中更新列表 这里我们需要提前了解一下 @Builder装饰器 的基本用法 ArkUI提供了一种轻量的UI元素复用机制@Builder，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法…
阅读更多...
Android SELinux——安全策略（三）

Android SELinux——安全策略（三）

SELinux 通过严格的访问控制机制增强了 Linux 系统的安全性。它通过标签和安全策略来控制进程和文件的访问权限，从而保护系统免受未经授权的访问和攻击。 一、策略介绍 1、主要组件 安全标签（Security Labels）：每个文件、目录、进程等都有一个安全标签。标签包含类型（Ty…
阅读更多...
使用激光跟踪仪提升码垛机器人精度

使用激光跟踪仪提升码垛机器人精度

标题1.背景 码垛机器人是一种用于工业自动化的机器人，专门设计用来将物品按照一定的顺序和结构堆叠起来，通常用于仓库、物流中心和生产线上，它们可以自动执行重复的、高强度的搬运和堆垛任务。 图1 码垛机器人 传统调整码垛机器人的方法&a…
阅读更多...
JavaEE: 深入解析HTTP协议的奥秘(2)

JavaEE: 深入解析HTTP协议的奥秘(2)

文章目录 HTTP认识 URLURL encode 介绍 认识 "方法"(method)GETPOST其他方法 HTTP JavaEE: 深入解析HTTP协议的奥秘(1) 书接上文~ 认识 URL 平时我们俗称的"网址"其实就是说的 URL .(唯一资源定位符) URL 不是 HTTP 专属的,很多协议都会用到. 其实除了 …
阅读更多...
基于springboot+小程序的智慧物流管理系统（物流1）

基于springboot+小程序的智慧物流管理系统（物流1）

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于springboot小程序的智慧物流管理系统实现了管理员、司机及用户。 1、管理员实现了司机管理、用户管理、车辆管理、商品管理、物流信息管理、基础数据管理、论坛管理、公告信息管理等。…
阅读更多...
Ubuntu20.04，编译安装BCC

Ubuntu20.04，编译安装BCC

https://github.com/iovisor/bcc/blob/master/INSTALL.md 一、内核配置 In general, to use these features, a Linux kernel version 4.1 or newer is required. In addition, the kernel should have been compiled with the following flags set: CONFIG_BPFy CONFIG_BP…
阅读更多...
最新文章

Copyright @ 2022~2023