0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS开发案例:【卡片二级联动】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-06 17:08 次阅读

1 卡片介绍

使用ArkTS语言,实现一个导航与内容二级联动的效果。

2 标题

二级联动(ArkTS)

3 介绍

介绍了如何基于List组件实现一个导航和内容的二级联动效果。样例主要包含以下功能:

  1. 切换左侧导航,右侧滚动到对应的内容。
  2. 滚动右侧的内容,左侧会切换对应的导航。

效果如图所示:

相关概念

  • [List]:列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。
  • [ListItemGroup]:该组件用来展示列表item分组,宽度默认充满List组件,必须配合List组件来使用。

4 环境搭建

软件要求

  • [DevEco Studio]版本:DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本:API version 9。

硬件要求

  • 开发板类型:[润和RK3568开发板]。
  • OpenHarmony系统:3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:

  1. [获取OpenHarmony系统版本]:标准系统解决方案(二进制)。以3.2 Release版本为例:
  2. 搭建烧录环境。
    1. [完成DevEco Device Tool的安装]
    2. [完成RK3568开发板的烧录]
  3. 搭建开发环境。
    1. 开始前请参考[工具准备],完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后,请参考[使用工程向导]创建工程(模板选择“Empty Ability”)。
    3. 工程创建完成后,选择使用[真机进行调测]。
    4. 鸿蒙开发指导文档:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

5 代码结构解读

本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在gitee中提供。

├──entry/src/main/ets                // 代码区
│  ├──common
│  │  └──constants
│  │     └──Constants.ets            // 常量类
│  ├──entryability
│  │  └──EntryAbility.ts             // 程序入口类
│  ├──pages
│  │  └──IndexPage.ets               // 二级联动页面入口
│  ├──view
│  │  ├──ClassifyItem.ets            // 课程分类组件
│  │  └──CourseItem.ets              // 课程信息组件
│  └──viewmodel                          
│     ├──ClassifyModel.ets           // 导航Model
│     ├──ClassifyViewModel.ets       // 导航ViewModel
│     ├──CourseModel.ets             // 课程内容Model
│     └──LinkDataModel.ets           // 数据源Model
└──entry/src/main/resources          // 资源文件

`HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789v直接拿`

搜狗高速浏览器截图20240326151344.png

6 二级联动实现

界面整体使用Row组件实现横向布局,分为左右两部分。均使用List组件实现对导航和内容的数据展示,导航部分固定宽度,内容部分自适应屏幕剩余宽度并用ListItemGroup完成每个导航下的内容布局。

Row() {
  List({ scroller: this.classifyScroller }) {
    ForEach(this.classifyList, (item: ClassifyModel, index: number) = > {
      ListItem() {
        ClassifyItem({
          classifyName: item.classifyName,
          isSelected: this.currentClassify === index,
          onClickAction: () = > this.classifyChangeAction(index, true)
        })
      }
    }, (item: ClassifyModel) = > item.classifyName + this.currentClassify)
  }

  List({ scroller: this.scroller }) {
    ForEach(this.classifyList, (classifyItem: ClassifyModel) = > {
      ListItemGroup({
        header: this.ClassifyHeader(classifyItem.classifyName),
        space: Constants.COURSE_ITEM_PADDING
      }) {
        ForEach(classifyItem.courseList, (courseItem: CourseModel) = > {
          ListItem() {
            CourseItem({ itemStr: JSON.stringify(courseItem) })
          }
        }, courseItem = > courseItem.courseId)
      }
    }, item = > item.classifyId)
  }
  .sticky(StickyStyle.Header)
  .layoutWeight(1)
  .edgeEffect(EdgeEffect.None)
  .onScrollIndex((start: number) = > this.classifyChangeAction(start, false))
}

点击左侧导航时,右侧内容区域通过scrollToIndex方法跳转到对应的内容页面,并改变导航的选中状态。同理在滚动右侧内容的过程中,如果当前展示的ListItemGroup发生改变时,修改左侧导航的选中状态,并滚到到对应的导航item。

classifyChangeAction(index: number, isClassify: boolean) {
  if (this.currentClassify !== index) {
    // change the classify status
    this.currentClassify = index;
    if (isClassify) {
      // scroll the course scroll
      this.scroller.scrollToIndex(index);
    } else {
      // scroll the classify scroll
      this.classifyScroller.scrollToIndex(index);
    }
  }
}

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 开发板
    +关注

    关注

    25

    文章

    5033

    浏览量

    97382
  • OpenHarmony
    +关注

    关注

    25

    文章

    3716

    浏览量

    16260
收藏 人收藏

    评论

    相关推荐

    OpenHarmony开发案例:【计步器卡片

    基于Stage模型实现带有卡片的计步应用,用于介绍卡片开发及生命周期实现。
    的头像 发表于 04-15 09:22 695次阅读
    OpenHarmony<b class='flag-5'>开发案</b>例:【计步器<b class='flag-5'>卡片</b>】

    OpenHarmony开发案例:【电影卡片

    基于元服务卡片的能力,实现带有卡片的电影应用,介绍卡片开发过程和生命周期实现。
    的头像 发表于 04-15 17:53 1260次阅读
    OpenHarmony<b class='flag-5'>开发案</b>例:【电影<b class='flag-5'>卡片</b>】

    THS3001级联组成放大电路,实际接通后第二级有明显发热,为什么?

    实际接通后第二级有明显发热。单独测试第一没问题,对第二级直接输入第一的输出相关参数依然正常。可是两块一旦级联
    发表于 09-06 06:08

    一对一直播开发PHP源码

    php、html结合实现二级联动。一对一源码在php开发中我们经常会遇到一些功能需要二级联动二级联动就是说我们在选择一select不同的
    发表于 09-29 16:54

    HarmonyOS服务卡片快速开发

    HarmonyOS服务卡片快速开发
    发表于 06-19 13:52

    HarmonyOS卡片开发--服务卡片概述

    服务。 卡片提供方实例管理模块:由卡片提供方开发者实现,负责对卡片管理服务分配的卡片实例进行持久化管理。 通信适配层:由
    发表于 09-22 14:10

    HarmonyOS流转卡片设计规范分享

    服务流转是 HarmonyOS 的分布式操作方式。流转能力打破设备界限,多设备联动,使原子化服务可分可合、可流转,实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。开发者通过嵌入流转图标
    发表于 12-15 14:57

    HarmonyOS分享卡片设计规范学习分享

    Share 入口图标,根据业务特性和体验继承性,您可以将 Huawei Share 图标作为一界面的分享入口,或在二级界面与其他分享方式并列。为了保证在不同服务内一致的分享体验,若需显示 Huawei
    发表于 12-16 15:32

    HarmonyOS/OpenHarmony应用开发-FA卡片开发体验

    HarmonyOSOpenHarmony应用开发-FA卡片开发体验.docx示例代码:https://gitee.com/jltfcloudcn/jump_to/tree/maste
    发表于 12-06 14:48

    全国计算机二级试题全集

    全国计算机二级试题含有从,二级笔试试题BASIC,笔试试题FORTRAN,1994-2002年的二级C、二级Pascal、二级QBasic、
    发表于 12-30 10:20 27次下载
    全国计算机<b class='flag-5'>二级</b>试题全集

    华为开发HarmonyOS零基础入门:15分钟玩转harmonyOS服务卡片

    华为开发HarmonyOS零基础入门:15分钟玩转harmonyOS服务卡片,服务卡片颜值高、拥有服务直达功能。
    的头像 发表于 10-23 11:40 2221次阅读
    华为<b class='flag-5'>开发</b>者<b class='flag-5'>HarmonyOS</b>零基础入门:15分钟玩转<b class='flag-5'>harmonyOS</b>服务<b class='flag-5'>卡片</b>

    华为开发者分论坛HarmonyOS学生公开课-OpenHarmony Codelabs开发案

    2021华为开发者分论坛HarmonyOS学生公开课-OpenHarmony Codelabs开发案
    的头像 发表于 10-24 11:25 1916次阅读
    华为<b class='flag-5'>开发</b>者分论坛<b class='flag-5'>HarmonyOS</b>学生公开课-OpenHarmony Codelabs<b class='flag-5'>开发案</b>例

    HarmonyOS服务卡片如何换肤

      关注HarmonyOS的小伙伴肯定对服务卡片已经很熟悉了。服务卡片(也简称为“卡片”)是FA(FeatureAbility,元服务)的一种界面展示形式,将FA的重要信息或操作前置到
    的头像 发表于 02-12 10:28 2831次阅读
    <b class='flag-5'>HarmonyOS</b>服务<b class='flag-5'>卡片</b>如何换肤

    基于openharmony第三方组件适配移植实现二级联动列表

    项目介绍 项目名称:Linkage-RecyclerView 所属系列:openharmony的第三方组件适配移植 功能:实现二级联动列表 项目移植状态:主功能完成 调用差异:无 开发版本:sdk6
    发表于 03-30 10:40 1次下载

    用Java开发HarmonyOS服务卡片

    卡片服务:由卡片提供方开发者实现,开发者实现 onCreateForm、onUpdateForm 和 onDeleteForm 处理创建卡片
    的头像 发表于 04-26 11:04 1519次阅读