往期知识点整理
- 【鸿蒙UI实战开发】基于List和Scroller由简单到复杂列表布局开发实践
- 【鸿蒙ArkUI实战开发】基于ArkUI的透明页面效果
- 【鸿蒙ArkUI实战开发】基于Search组件实现搜索栏
- 【鸿蒙ArkUI实战开发】基于Swiper的页面布局
- 【鸿蒙ArkUI实战开发】基于promptAction全局弹窗
- 【鸿蒙ArkUI实战开发】基于OpenGL渲染视频画面帧
- 【鸿蒙实战开发】基于Navigation的路由拦截管理
- 【鸿蒙实战开发】基于组件嵌套的滑动
- 【鸿蒙实战开发】基于Text的自定义字体
- 【鸿蒙实战开发】基于Grid实现混合布局
- 【鸿蒙实战开发】基于ArkUI实现类似Toast弹窗
- 【鸿蒙实战开发】基于短距离通信的BLE蓝牙扫描
- 【鸿蒙实战开发】HiLog日志能力介绍
- 【鸿蒙实战开发】基于HiAppEvent能力的应用崩溃监控上报
- 【鸿蒙实战开发】基于Refresh组件的下拉刷新
- 持续更新中……
场景一
实现页面下拉刷新距离回调以及刷新距离自定义。
效果图
方案
整体思路:首先需要用装饰器@builder自定义构建一个函数,然后跟refresh的接口builder进行绑定Refresh({refreshing:$$this.isRefreshing,builder:this.customRefreshComponent()}),最后将通过refresh的系列回调逐步实现下拉过程中图标的动态变化。
- 根据refresh的builder自定义刷新样式的组件,图标地方使用了两个组件,一个是没有触发刷新状态时显示的logo,另一个是当进入刷新状态时显示的动态loading,这两个组件的显示与隐藏主要通过visibility属性以及状态变量控制是Visibility.None或者Visibility.Visible。
- 根据refreshOffset设置触发下拉刷新的距离。
- 给图标设置一个缩放值,下拉距离发生变化时会触发回调onOffsetChange,当下拉距离小于触发刷新距离时,该缩放值会根据下拉的距离从0开始慢慢变大到1,当下拉距离大于设置的刷新距离时,图标缩放值也从1开始慢慢变小,从而实现图标大小动态变化。
- 当刷新状态onStateChange的value变为3时,动态改变刷新图标以及文字,松手的时候触发进入刷新回调onRefreshing,通过setTimeout延迟2秒将刷新状态变量改为false结束刷新。
核心代码
第一步:自定义refresh刷新组件。
// 自定义refresh刷新组件
@Builder
customRefreshComponent() {
Stack() {
Column() {
// 定义图标
Image($r('app.media.startIcon')).height(28)
.scale({ x: this.scaleNum, y: this.scaleNum })
.visibility(this.flag ? Visibility.Visible : Visibility.None)
// 当进入刷新状态时可以更换显示组件,此地方可以根据实际情况更改
LoadingProgress().height(32).visibility(this.flag ? Visibility.None : Visibility.Visible)
Text(this.msg).fontSize(16)
}
.alignItems(HorizontalAlign.Center)
}.width("100%").height(100)
.align(Alignment.Center)
}
第二步:根据refreshOffset设置触发下拉刷新的距离。
Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {...}
// refreshOffset 设置触发刷新的下拉偏移量
.refreshOffset(this.refreshOffset)
第三步:根据下拉距离发生变化时触发回调onOffsetChange。
Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {...}
// 下拉距离发生变化时触发回调。
.onOffsetChange((value: number) => {
console.info('Refresh onOffsetChange offset:' + value)
// 下拉距离小于触发刷新距离时
if (value < this.refreshOffset) {
this.flag = true
this.msg = '下拉刷新'
this.scaleNum = value / this.refreshOffset // 图标缩放值慢慢变大到正常
}
// 下拉距离大于触发刷新距离时
else {
this.msg = '登入后可同步电脑文档'
this.scaleNum = this.refreshOffset / value // 图标缩放值慢慢变小
}
})
// 当前刷新状态变更时,触发回调
.onStateChange((refreshStatus: RefreshStatus) => {
// 当refreshStatus=3时,下拉结束,回弹至刷新距离,进入刷新状态。
if (refreshStatus === 3) {
// 将自定义组件的图标隐藏,显示进入刷新状态时的图标
this.flag = false
}
})
// refreshOffset 设置触发刷新的下拉偏移量
.refreshOffset(this.refreshOffset)
// 设置当下拉距离超过refreshOffset时是否触发刷新。
.pullToRefresh(true)
第四步:松手的时候触发进入刷新状态时回调。
// 当前刷新状态变更时,触发回调
.onStateChange((refreshStatus: RefreshStatus) => {
// 当refreshStatus=3时,下拉结束,回弹至刷新距离,进入刷新状态。
if (refreshStatus === 3) {
// 动态改变刷新文字
this.msg = '正在刷新中'
// 将自定义组件的图标隐藏,显示进入刷新状态时的图标
this.flag = false
}
})
// 进入刷新状态时触发回调。
.onRefreshing(() => {
setTimeout(() => {
this.isRefreshing = false
}, 2000)
})
总是有很多小伙伴反馈说:鸿蒙开发不知道学习哪些技术?不知道需要重点掌握哪些鸿蒙开发知识点? 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。
针对一些列因素,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线,包含了鸿蒙开发必掌握的核心知识要点,内容有(OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等)技术知识点。
《鸿蒙 (Harmony OS)开发学习手册》(共计892页):https://gitcode.com/HarmonyOS_MN/733GH/overview
如何快速入门?
1.基本概念
2.构建第一个ArkTS应用
3.……
开发基础知识:
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.……
鸿蒙开发面试真题(含参考答案):https://gitcode.com/HarmonyOS_MN/733GH/overview
OpenHarmony 开发环境搭建
《OpenHarmony源码解析》:https://gitcode.com/HarmonyOS_MN/733GH/overview
- 搭建开发环境
- Windows 开发环境的搭建
- Ubuntu 开发环境搭建
- Linux 与 Windows 之间的文件共享
- ……
- 系统架构分析
- 构建子系统
- 启动流程
- 子系统
- 分布式任务调度子系统
- 分布式通信子系统
- 驱动子系统
- ……