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

介绍

本示例通过定义层级实现多层折叠面板，并在首页性能文章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 })
}

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

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                  // 模型层-类型定义

写在最后

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