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

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙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.mzph.cn/pingmian/56029.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C++】--内存管理

【C++】--内存管理

👾个人主页: 起名字真南 👻个人专栏:【数据结构初阶】 【C语言】 【C】 目录 1 C/C内存分布2 C语言中动态内存管理方式 ：3 C内存管理方式3.1 new/delete操作内置类型3.2 new和delete操作自定义类型 4 operator new与operator delete4.1 opera…
阅读更多...
数据分析库Pandas

数据分析库Pandas

一、认识Pandas数据分析库 Pandas是一个功能强大的数据分析库，它提供了丰富的数据结构和函数来处理和分析表格数据。在处理类似您提供的Excel文件时，首先需要导入Pandas库并读取数据，然后进行数据清洗和预处理，最后进行数据分析和…
阅读更多...
SwiftUI 在 iOS 18 中的 ForEach 点击手势逻辑发生改变的解决

SwiftUI 在 iOS 18 中的 ForEach 点击手势逻辑发生改变的解决

概述 原本在 iOS 17 中运行良好的 SwiftUI 代码突然在 iOS 18 无法正常工作了，具体表现为原来视图中的的点击手势无法响应。 这是怎么回事呢？ 且看分解！Let’s go！！！😉 问题现象 从下面的演示…
阅读更多...
图书馆自习室座位预约管理微信小程序+ssm(lw+演示+源码+运行）

图书馆自习室座位预约管理微信小程序+ssm(lw+演示+源码+运行）

摘 要 随着电子商务快速发展世界各地区,各个高校对图书馆也起来越重视.图书馆代表着一间学校或者地区的文化标志，因为图书馆丰富的图书资源能够带给我们重要的信息资源，图书馆管理系统是学校管理机制重要的一环，,面对这一世界性的新动向和新…
阅读更多...
【SQL】深入了解 SQL 索引：数据库性能优化的利器

【SQL】深入了解 SQL 索引：数据库性能优化的利器

目录 引言1. 什么是 SQL 索引？1.1 索引的基本概念1.2 索引的优缺点 2. 索引的工作原理2.1 B 树索引2.2 哈希索引2.3 全文索引 3. 索引创建方式3.1 单列索引示意图3.2 复合索引示意图3.3 唯一索引示意图 4. 如何创建索引4.1 创建单列索引4.2 创建唯一索引4.3 创建全文…
阅读更多...
在ES6中，数组新增扩展及其用法汇总

在ES6中，数组新增扩展及其用法汇总

在ES6中，数组新增了多项扩展，极大提高了操作数组的便捷性。以下是一些常用的扩展及其用法： 1. Array.from() 用于从类数组对象或迭代器创建一个新的数组实例。这个方法可以接受两个参数： source (来源)：这是必须的参…
阅读更多...
Docker-nginx数据卷挂载

Docker-nginx数据卷挂载

数据卷（volume）是一个虚拟目录，是容器内目录与宿主机目录之间映射的桥梁。 以Nginx为例，我们知道Nginx中有两个关键的目录： html：放置一些静态资源conf：放置配置文件 如果我们要让Nginx代理我们…
阅读更多...
vue3.2实现AES加密解密，秘钥通过API获取，并混淆秘钥，后端thinkphp

vue3.2实现AES加密解密，秘钥通过API获取，并混淆秘钥，后端thinkphp

aes.ts文件 import CryptoJS from "crypto-js"; import axios from "axios";export const encrypt async(data: any) > {let storeKey sessionStorage.getItem(a)let storeIv:any sessionStorage.getItem(i)// 如果秘钥或 IV 不存在，尝试…
阅读更多...
磁盘存储链式结构——B树与B+树

磁盘存储链式结构——B树与B+树

红黑树处理数据都是在内存中，考虑的都是内存中的运算时间复杂度。如果我们要操作的数据集非常大，大到内存已经没办法处理了该怎么办呢？ 试想一下，为了要在一个拥有几十万个文件的磁盘中查找一个文本文件，设计的…
阅读更多...
Dockerfile 详解

Dockerfile 详解

Dockerfile是自定义Docker镜像的一套规则，由多条指令构成，每条指令都会对应于Docker镜像中的每一层，因为Docker是分层存储的。以下是Dockerfile中各个参数的详解及演示解析： 1. FROM 功能：指定待扩展的父级镜像&#…
阅读更多...
Lumerical脚本语言——材料数据库（Material database）

Lumerical脚本语言——材料数据库（Material database）

下面的命令用来在材料数据库添加或者拷贝材料，以及设置材料属性，并在任何频率验证给定材料所得到的复反射率。（通过简单地对反射率开方就可以得到介电常数）。本部分同 INTERCONNECT 不相关。 命令描述 addmaterial 向材料数据库添…
阅读更多...
在 Linux 系统中设置 Service 服务开机自启的详细指南

在 Linux 系统中设置 Service 服务开机自启的详细指南

目录 在 Linux 系统中设置 Service 服务开机自启的详细指南一、Linux 服务管理概述二、systemd 中设置服务开机自启2.1 systemd 介绍2.2 如何检查服务的状态2.3 启用服务开机自启2.4 手动启动和停止服务2.5 检查服务是否成功启用2.6 禁用开机自启服务 三、在 sysvinit 中设置服…
阅读更多...
sass学习笔记（1.0）

sass学习笔记（1.0）

1.使用变量 sass可以像声明变量那样进行使用，这样同样的样式，就可以使用相同的变量来提高复用。 语法为：$ 变量名 在界面中也可以正常的显示 当然了，变量之间也可以相互引用，比如下面 div{$_color: #d45387;$BgColo…
阅读更多...
用C++编写信息管理系统（歌单信息管理）

用C++编写信息管理系统（歌单信息管理）

C语言是面向过程的编程语言，而C是面向对象的编程语言，在书写代码时风格有所不同（也存在很多共性）。 程序说明 本次系统程序使用的是C语言进行编写，主要考虑怎么实现面向对象的问题。 因为本次程序属于小型系统程序&…
阅读更多...
javaScript if else factory function

javaScript if else factory function

阅读更多...
多元线性回归：机器学习中的经典模型探讨

多元线性回归：机器学习中的经典模型探讨

引言 多元线性回归是统计学和机器学习中广泛应用的一种回归分析方法。它通过分析多个自变量与因变量之间的关系，帮助我们理解和预测数据的行为。本文将深入探讨多元线性回归的理论背景、数学原理、模型构建、技术细节及其实际应用。 一、多元线性回归的背景与发展…
阅读更多...
在Ubuntu上安装Docker以及使用

在Ubuntu上安装Docker以及使用

文章目录 一、安装Docker二、启动与测试Docker三、设置Docker自动启动四、添加Docker用户组（可选）五、Docker的常用命令六、Docker容器的使用 以下是在Ubuntu上安装Docker以及使用的详细教程： 一、安装Docker 更新软件包索引 在安装Docker之前…
阅读更多...
2024免费mac苹果电脑清理垃圾软件CleanMyMac X4.15.8

2024免费mac苹果电脑清理垃圾软件CleanMyMac X4.15.8

对于苹果电脑用户来说，设备上积累的垃圾文件可能会导致存储空间变得紧张，影响电脑的性能和使用体验。尤其是那些经常下载和安装新应用、编辑视频或处理大量照片的用户，更容易感受到存储空间的压力。面对这种情况，寻找一种有效的苹…
阅读更多...
在 Spring 容器初始化 Bean 时，通过反射机制处理带有自定义 注解的字段，并将其注入相应的 Spring 管理的 Bean

在 Spring 容器初始化 Bean 时，通过反射机制处理带有自定义 注解的字段，并将其注入相应的 Spring 管理的 Bean

背景:我们之前项目用的自己研发的框架,后来又要重构,但是有些功能还依赖于之前的框架,万不得已的情况下,我就把之前的框架当成三方的依赖给引入,引入以后就发现,很多类上用了Inject这个注解,再一看包名竟然是自定义的,这几个类就是无法注入到spring中,用了好多种方法,使用的时候…
阅读更多...
计组_中断响应的步骤

计组_中断响应的步骤

2024.10.13：计算机组成原理学习笔记 中断响应步骤 中断响应 （中断响应的过程也称中断隐指令）第一步：关中断第二步：保存断点第三步：引出中断服务程序中断源识别判优方法1：软件查询方法中断源识别…
阅读更多...
最新文章

Copyright @ 2022~2023