OpenHarmony实战开发-List组件的使用之商品列表
介绍
OpenHarmony ArkTS提供了丰富的接口和组件,开发者可以根据实际场景和开发需求,选用不同的组件和接口。在本篇Codelab中,我们使用Scroll、List以及LazyForEach实现一个商品列表的页面,并且拥有下拉刷新,懒加载和到底提示的效果。效果图如下:
相关概念
- Scroll:可滚动的容器组件,当子组件的布局尺寸超过父组件的视口时,内容可以滚动。
- List:列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。
- Tabs:一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。
- LazyForEach :开发框架提供数据懒加载(LazyForEach组件)从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。
环境搭建
软件要求
- DevEco Studio版本:DevEco Studio 3.1 Release。
- OpenHarmony SDK版本:API version 9。
硬件要求
- 开发板类型:润和RK3568开发板。
- OpenHarmony系统:3.2 Release。
环境搭建
完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:
- 获取OpenHarmony系统版本:标准系统解决方案(二进制)。以3.2 Release版本为例:
2.搭建烧录环境。
- 完成DevEco Device Tool的安装
- 完成RK3568开发板的烧录
3.搭建开发环境。
- 开始前请参考工具准备,完成DevEco Studio的安装和开发环境配置。
- 开发环境配置完成后,请参考使用工程向导创建工程(模板选择“Empty Ability”),选择JS或者eTS语言开发。
- 工程创建完成后,选择使用真机进行调测。
代码结构解读
本篇Codelab只对核心代码进行讲解。
(图片来源网络,侵删)├──entry/src/main/ets // 代码区 │ ├──common │ │ └──CommonConstants.ets // 常量集合文件 │ ├──entryability │ │ └──EntryAbility.ts // 应用入口,承载应用的生命周期 │ ├──pages │ │ └──ListIndex.ets // 页面入口 │ ├──view │ │ ├──GoodsListComponent.ets // 商品列表组件 │ │ ├──PutDownRefreshLayout.ets // 下拉刷新组件 │ │ └──TabBarsComponent.ets // Tabs组件 │ └──viewmodel │ ├──InitialData.ets // 初始化数据 │ └──ListDataSource.ets // List使用的相关数据加载 └──entry/src/main/resources ├──base │ ├──element // 字符串以及颜色的资源文件 │ ├──media // 图片等资源文件 │ └──profile // 页面配置文件存放位置 ├──en_US │ └──element │ └──string.json // 英文字符存放位置 └──zh_CN └──element └──string.json // 中文字符存放位置
页面布局
页面使用Navigation与Tabs做页面布局,使用Navigation的title属性实现页面的标题,Tabs做商品内容的分类。示例代码如下:
// ListIndex.ets Row() { Navigation() { Column() { TabBars() } .width(LAYOUT_WIDTH_OR_HEIGHT) .justifyContent(FlexAlign.Center) } .size({ width: LAYOUT_WIDTH_OR_HEIGHT, height: LAYOUT_WIDTH_OR_HEIGHT }) .title(STORE) .titleMode(NavigationTitleMode.Mini) } .height(LAYOUT_WIDTH_OR_HEIGHT) .backgroundColor($r('app.color.primaryBgColor'))
页面分为“精选”、“手机”、“服饰”、“穿搭”、“家居”五个模块,由于本篇CodeLab的主要内容在“精选”部分,故将“精选”部分单独编写代码,其余模块使用ForEach遍历生成。示例代码如下:
// TabBarsComponent.ets Tabs() { // 精选模块 TabContent() { Scroll() { Column() { if (this.refreshStatus) { PutDownRefresh({ refreshText: $refreshText }) } GoodsList() Text($r('app.string.to_bottom')) .fontSize(NORMAL_FONT_SIZE) .fontColor($r('app.color.gray')) } .width(LAYOUT_WIDTH_OR_HEIGHT) } ... } .tabBar(this.firstTabBar) // 其他模块 ForEach(initTabBarData, (item: Resource, index?: number) => { TabContent() { Column() { Text(item).fontSize(MAX_FONT_SIZE) } .justifyContent(FlexAlign.Center) .width(LAYOUT_WIDTH_OR_HEIGHT) .height(LAYOUT_WIDTH_OR_HEIGHT) } .tabBar(this.otherTabBar(item, index !== undefined ? index : 0)) }) } ...
商品列表的懒加载
使用Scroll嵌套List做长列表,实现Scroll与List的联动。具体实现代码如下:
// TabBarsComponent.ets Scroll() { Column() { // 下拉刷新的组件 if (this.refreshStatus) { PutDownRefresh({ refreshText:$refreshText }) } // List的自定义组件 GoodsList() Text($r('app.string.to_bottom')).fontSize(NORMAL_FONT_SIZE).fontColor($r('app.color.gray')) } .width(LAYOUT_WIDTH_OR_HEIGHT) } ...
商品列表往往数据量很多,如果使用ForEach一次性遍历生成的话,性能不好,所以这里使用LazyForEach进行数据的懒加载。当向下滑动时,需要加载新的数据的时候,再将新的数据加载出来,生成新的列表。
通过onTouch事件来触发懒加载行为,当商品列表向下滑动,加载新的数据。示例代码如下:
// GoodsListComponent.ets List({ space:commonConst.LIST_ITEM_SPACE }) { LazyForEach(this.goodsListData, (item: GoodsListItemType) => { ListItem() { Row() { Column() { Image(item?.goodsImg) ... } ... // 布局样式 Column() { ... // 布局代码 } ... // 布局样式 } } // 通过Touch事件来触发懒加载 .onTouch((event?:TouchEvent) => { if (event === undefined) { return; } switch (event.type) { case TouchType.Down: this.startTouchOffsetY = event.touches[0].y; break; case TouchType.Up: this.startTouchOffsetY = event.touches[0].y; break; case TouchType.Move: if (this.startTouchOffsetY - this.endTouchOffsetY > 0) { this.goodsListData.pushData(); } break; } }) }) } ...
下拉刷新与到底提示
下拉刷新同样使用TouchEvent做下拉的判断,当下拉的偏移量超出将要刷新的偏移量时,就展示下拉刷新的布局,同时使用条件渲染判断是否显示下拉刷新布局,实现效果如下图:
(图片来源网络,侵删)具体代码如下:
// TabBarsComponent.ets putDownRefresh(event?:TouchEvent): void { if (event === undefined) { return; } switch (event.type) { case TouchType.Down: // 记录手指按下的y坐标 this.currentOffsetY = event.touches[0].y; break; case TouchType.Move: // 根据下拉的偏移量来判断是否刷新 this.refreshStatus = event.touches[0].y - this.currentOffsetY > MAX_OFFSET_Y; break; case TouchType.Cancel: break; case TouchType.Up: // 模拟刷新效果,并未真实请求数据 this.timer = setTimeout(() => { this.refreshStatus = false; }, REFRESH_TIME) break; } } ... // 下拉刷新的组件根据条件决定是否显示 if (this.refreshStatus) { PutDownRefresh({ refreshText:$refreshText }) }
列表到底提示“已经到底了”并回弹的效果使用了Scroll的edgeEffect来控制回弹,实现效果如下图:
具体代码如下:
// TabBarsComponent.ets Scroll() { Column() { ... GoodsList() Text($r('app.string.to_bottom')).fontSize(NORMAL_FONT_SIZE).fontColor($r('app.color.gray')) } .width(LAYOUT_WIDTH_OR_HEIGHT) } .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) .width(LAYOUT_WIDTH_OR_HEIGHT) .height(LAYOUT_WIDTH_OR_HEIGHT) .onTouch((event?: TouchEvent) => { this.putDownRefresh(event) })
总结
您已经完成了本次Codelab的学习,并了解到以下知识点:
- 使用Scroll组件与List组件实现列表布局。
- 使用onTouch事件实现下拉刷新动作与懒加载效果。
为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→《HarmonyOS教学视频》
HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等.....视频教程
鸿蒙生态应用开发白皮书V2.0PDF:
获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》
鸿蒙 (Harmony OS)开发学习手册
一、入门必看
- 应用开发导读(ArkTS)
- ……
二、HarmonyOS 概念
- 系统定义
- 技术架构
- 技术特性
- 系统安全
- ........
三、如何快速入门?《做鸿蒙应用开发到底学习些啥?》
- 基本概念
- 构建第一个ArkTS应用
- ……
四、开发基础知识
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
五、基于ArkTS 开发
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
更多了解更多鸿蒙开发的相关知识可以参考:《鸿蒙 (Harmony OS)开发学习手册》
还没有评论,来说两句吧...