当前位置： 首页 > article >正文

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

article 2024/10/20 3:53:58

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙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
  @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%')

    }
  }

5. 学习地址

全网首发鸿蒙NEXT星河版零基础入门到实战，2024年最新版，企业级开发！视频陆续更新中！_哔哩哔哩_bilibili


http://www.kler.cn/news/356766.html

相关文章：

  • vue 环境安装
  • Keepalived：构建高可用性的秘密武器
  • 预警！这些SCISSCI已被多家学校/单位拉黑，请谨慎投递！
  • CSS 选择器简单回顾
  • 第二十五：IP网络层的数据，IP数据报
  • 网络参考模型总结
  • Java中的StringBuilder类
  • 【Vue】Vue3.0 （十二）、watch对ref定义的基本类型、对象类型；reactive定义的对象类型的监视使用
  • 【整合包及教程】第二代GPT-SoVITS V2：革新声音克隆技术
  • Linux——K8S平台的权限规划
  • connect 的断线重连设计
  • .cwsp勒索病毒：了解最新变种，以及如何保护您的数据
  • ubuntu24.0离线安装Ollama和纯cpu版本以及对接Spring AI
  • Missing classes detected while running R8报错解决方案
  • 博客|基于springBoot的精简博客系统设计与实现(附项目源码+论文+数据库）
  • [机器视觉]basler相机使用SN编号打开相机和采集
  • Android中的MVP模式
  • 【LeetCode】每日一题 2024_10_16 最小元素和最大元素的最小平均值（排序、模拟）
  • Android 开发 TabLayout 自定义指示器长度
  • 深入学习二叉树（BinaryTree）（纯小白进）