纯血鸿蒙APP实战开发——评论组件案例实现

144 篇文章 3 订阅
110 篇文章 0 订阅

介绍

评论组件在目前市面上的短视频app中是一种很常见的场景,本案例使用全局状态保留能力弹窗来实现评论组件。点击评论按钮弹出评论组件,点击空白处隐藏该组件,再次点击评论按钮则会恢复上一次浏览的组件状态。

效果图预览

使用说明

  1. 点击评论按钮打开评论组件。
  2. 上下滑动可以浏览评论。
  3. 点击空白处或者关闭按钮可以关闭评论组件。
  4. 再次点击评论按钮则恢复上一次浏览评论位置。

实现思路

  1. 使用GlobalStateDialogManager来操作全局状态保留能力弹窗的布局内容以及显隐。源码参考Side.ets
    首先导入GlobalStateDialogManager,如下:
import { GlobalStateDialogManager } from '@ohos/base';
  1. 初始化及评论内容更改时,使用operateGlobalStateDialog函数配置弹窗内容布局,如下:
  @Link @Watch('changeCommentData') commentData: CommentDataSource; // 当评论内容更改时刷新全局弹窗

  changeCommentData() {
    GlobalStateDialogManager.operateGlobalStateDialog({
      wrapBuilder: wrapBuilder(commentBuilder),
      params: this.commentData
    });
  }

  aboutToAppear(): void {
    this.changeCommentData();
  }
  
  @Builder
  function commentBuilder(commentData: CommentDataSource): void {
    CommentComponent({ commentData: commentData })
  }
  1. 按钮点击时通过operateGlobalStateDialog函数配置弹窗显示,如下:
  build() {
    、、、
    
      Column() {
        Image($r("app.media.short_video_new_icon"))
          .height($r("app.integer.short_video_fabulous_height"))
          .width($r("app.integer.short_video_fabulous_width"))
          .objectFit(ImageFit.ScaleDown)
          .margin({ bottom: $r("app.integer.short_video_fabulous_margin_bottom") })
        Text(this.commentCount)
          .fontSize($r("app.integer.short_video_fabulous_font_size"))
          .fontColor(Color.White)
          .opacity($r("app.float.short_video_fabulous_opacity"))
      }.width('60%')
      .height($r("app.integer.short_video_all_fabulous_height"))
      .onClick(() => {
        // 开启全局弹窗
        GlobalStateDialogManager.operateGlobalStateDialog({ isShowGlobalStateDialog: true });
      })
      
      、、、
  }

高性能知识点

本示例使用了LazyForEach进行数据懒加载,LazyForEach懒加载可以通过设置cachedCount属性来指定缓存数量,同时搭配组件复用能力以达到性能最优效果。

工程结构&模块类型

shortvideo                             // har类型
|---model
|   |---BasicDataSource.ets            // 模型层-懒加载数据源
|   |---DataModel.ets                  // 数据模型层-视频数据
|---view
|   |---ShortVideo.ets                 // 视图层-主页
|   |---Side.ets                       // 视图层-视频右侧页面操作栏与左侧信息栏
|   |---VideoSwiper.ets                // 视图层-短视频切换
|   |---CommentView.ets                // 视图层-评论组件

模块依赖

  1. 路由模块:供entry模块实现路由导航
  2. 公共模块:全局状态保留能力弹窗

参考资料

全局状态保留能力弹窗

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线【包含了大APP实战项目开发】

本路线共分为四个阶段:

第一阶段:鸿蒙初中级开发必备技能

第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH

第三阶段:应用开发中高级就业技术

第四阶段:全网首发-工业级南向设备开发就业技术:https://gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》(共计892页)

如何快速入门?

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH

鸿蒙入门教学视频:

美团APP实战开发教学:gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:gitee.com/MNxiaona/733GH

  • 13
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鸿蒙开发app实战源码是指使用鸿蒙系统来开发应用程序所涉及的源代码示例。鸿蒙系统是由华为公司推出的全场景分布式操作系统,旨在为开发者提供更简单、高效的应用开发环境。 鸿蒙开发app实战源码包括了开发鸿蒙应用所需的各种源代码示例,其中包括界面布局、事件处理、数据交互等核心功能的实现方法。通过学习这些源码示例,开发人员可以更深入了解鸿蒙系统的开发方式和特性,从而更快地上手开发鸿蒙应用。 鸿蒙开发app实战源码通常包含以下几个方面的内容: 1. 页面布局示例:展示了如何使用鸿蒙系统提供的布局组件来构建应用界面,包括线性布局、网格布局等。 2. 事件处理示例:介绍了如何处理用户的各种操作事件,比如点击、触摸等,以及如何响应这些事件并进行相应的处理逻辑。 3. 数据交互示例:演示了如何使用鸿蒙系统提供的数据交互接口与后台服务器进行数据交互,包括发送请求、接收响应等。 通过实际的源码示例,开发人员可以更加直观地了解鸿蒙系统的开发流程和技术细节,加速自己的学习和开发进度。同时,源码示例也为开发人员提供了一些最佳实践和经验总结,可以帮助他们更好地编写高质量的鸿蒙应用代码。 总之,鸿蒙开发app实战源码是开发者学习和掌握鸿蒙应用开发的重要资源,通过学习这些源码示例,开发人员能够更好地开发出符合用户需求和有良好用户体验的鸿蒙应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值