鸿蒙开发实战案例：折叠面板案例

原创

小帅聊鸿蒙

发布于 2025-02-27 17:40:59

340

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

介绍

本示例通过定义层级实现多层折叠面板，并在首页性能文章tab实际使用跳转到对应文章的web页面。

效果图预览

使用说明

定义好菜单各层级的数据源，可以由父级传入也可以固定，本案例为固定数据源。

根据当前层级节点是否存在children判断是否可展开，以此实现折叠效果，本案例使用三级四级效果。

实现思路

场景：通过children字段判断是否可展开

折叠面板的列表项传入固定数据源。

根据当前层级节点是否存在children判断是否可展开，再根据isUnfold判断当前是否展开，从而控制右侧箭头的显隐及切换。

if (this.thirdLevelCategory.childNodes?.length > 0) {
  Image(this.isUnfold ? $r('app.media.ic_down_arrow') : $r('app.media.ic_right_arrow'))
    .width(this.isUnfold ? 24 : 12)
    .height(this.isUnfold ? 12 : 24)
    .margin({ right: this.isUnfold ? 0 : 6 })
}

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到一下知识点。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

当用户点击菜单时，判断是否有子级，若没有则进行跳转逻辑，若有则把子级菜单展开。

Row() {
  Text(this.thirdLevelCategory.title)
    .fontSize(16)
    .margin({ left: 16 })
    .fontFamily('HarmonyHeiTi-Medium')
    .fontColor($r('app.color.font_color_dark'))

    Blank()

  if (this.thirdLevelCategory.childNodes?.length > 0) {
    Image(this.isUnfold ? $r('app.media.ic_down_arrow') : $r('app.media.ic_right_arrow'))
      .width(this.isUnfold ? 24 : 12)
      .height(this.isUnfold ? 12 : 24)
      .margin({ right: this.isUnfold ? 0 : 6 })
  }
}
.height(56)
.width('100%')
.onClick(() => {
  if (this.thirdLevelCategory.childNodes?.length === 0) {
    DynamicsRouter.pushUri('collapsemenu/ArticleWebComponent', this.thirdLevelCategory);
    AppStorage.setOrCreate('articleWebUrl', this.thirdLevelCategory.url)
  } else {
    this.isUnfold = !this.isUnfold;
  }
})

工程结构&模块类型

   collapsemenu                                     // har类型
   |---src/main/ets/component
   |   |---collapseMenu.ets                         // 视图层-主页 
   |---src/main/ets/model
   |   |---articleList.ets                          // 模型层-性能文章列表 
   |   |---articleWebComponent.ets                  // 视图层-web页面
   |   |---categoricalDataType.ets                  // 模型层-类型定义