介绍
在很多应用中,向上滑动"我的"页面,页面顶部会有如下变化效果:一部分信息逐渐隐藏,另一部分信息逐渐显示,同时一些组件会进行缩放或者位置移动。向下滑动时则相反。
效果图预
使用说明
- 向上滑动页面,出现如下变化:用户名/选择身份/设置图标/客服图标逐渐隐藏,用户头像尺寸逐渐缩小并向右上平移,顶部"返回"文本后方用户名逐渐显示。
- 滑动到顶部后,向下滑动页面,出现如下变化:用户头像尺寸逐渐变大并向左下平移,顶部"返回"文本后方的用户名逐渐隐藏,原来的用户名/选择身份/设置图标/客服图标逐渐显示。
实现思路
本例涉及的关键特性和实现方案如下:
1.将屏幕从上向下分为三部分,第一部分Row组件包含"返回"和初始状态下隐藏的用户名,第二部分Row包含用户头像/用户名/选择身份/设置/客服,下方其余部分位第三部分。本例场景的变化体现在第一和第二部分。源码参考SlideToHideAndDisplace
Column() {
Row() {...}
.padding($r('app.integer.padding_small'))
.width($r('app.string.size_full'))
.alignItems(VerticalAlign.Center)
Row() {...}
.height($r('app.integer.height_one_hundred'))
.width($r('app.string.size_full'))
Scroll() {...}
}
2.在第一和第二部分中,使用@State装饰器装饰相关的组件属性,使之与自定义组件的渲染绑定起来,状态变量改变时,UI会发生对应的渲染改变。用户头像的缩放通过改变其width和height属性值的大小来刷新,用户头像的位移通过改变其margin属性中的top和left的大小来刷新。其他一些组件的显隐变化通过改变其opacity属性值的大小来刷新。源码参考SlideToHideAndDisplace
@State userRowOpacity: number = 1;
@State userImageHeight: number = 50;
...
build() {
Column() {
Row() {
...
Text($r('app.string.phone_number'))
.opacity(this.userNameOpacity) // userNameOpacity控制顶部用户名的透明度
Blank()
Text("设置")
.opacity(this.userNameOpacity) // 设置的文字透明度与顶部用户名相同
Text("客服")
.opacity(this.userNameOpacity) // 客服的文字透明度与顶部用户名相同
}
Row() {
Image($r('app.media.batman'))
.width(this.userImageHeight)
.height(this.userImageHeight) // userImageHeight控制头像尺寸
// userImageMarginTop和userImageMarginLeft控制头像在父容器内的位置
.margin({ top: this.userImageMarginTop, left: this.userImageMarginLeft })
Column() {...}
.alignItems(HorizontalAlign.Start)
.opacity(this.userRowOpacity) // 控制Row组件的透明度
}
...
}
}
3.第三部分页面滚动通过Scroll组件实现,其中第二栏和第三栏相似,使用@Builder装饰器封装了两个自定义构建函数IconAndDescription和CustomRow,增加代码复用。源码参考SlideToHideAndDisplace
// 自定义构建函数,将重复使用的UI元素抽象成一个方法。此处样式为:上方图标下方文字
@Builder
IconAndDescription(icon: Resource, description: string | Resource, iconSize?: Size, radius?: number) {
Column() {
Image(icon)
.size(iconSize === undefined ? { height: $r('app.integer.icon_default_height'),
width: $r('app.integer.icon_default_height') } : iconSize)
.borderRadius(radius)
Text(description)
.margin({ top: $r('app.integer.margin_between_icon_and_description') })
}
}
// 自定义构建函数。此处样式为:在Row组件中横向排列IconAndDescription
@Builder
CustomRow(iconsAndDescriptions: IconAndDescription[]) {
Row() {
ForEach(iconsAndDescriptions, (item: IconAndDescription) => {
this.IconAndDescription(item.icon, item.description)
})
}
.width($r('app.string.size_full'))
.justifyContent(FlexAlign.SpaceAround)
.padding($r('app.integer.padding_small'))
.margin({ top: $r('app.integer.margin_small') })
.backgroundColor($r('app.color.color_transparent_aa'))
.borderRadius($r('app.integer.border_radius'))
}
高性能知识点
本例中Scroll组件绑定onScroll滚动事件回调,onScroll属于频繁回调,在回调中需要尽量减少耗时和冗余操作,例如减少不必要的日志打印。
工程结构&模块类型
slidetohideanddisplace // har包
|---model
| |---Util.ets // 提供测试数据类
|---SlideToHideAndDisplace.ets // 滑动变化效果实现页面
模块依赖
不涉及。
为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等…视频教程
鸿蒙生态应用开发白皮书V2.0PDF: 获取完整版白皮书方式请点击→https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG?u=a42c4946d1514235863bb82a7b2ac128
鸿蒙 (Harmony OS)开发学习手册→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
一、入门必看
1.应用开发导读(ArkTS)
2………
二、HarmonyOS 概念→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.系统定义
2.技术架构
3.技术特性
4.系统安全
5…
三、如何快速入门?→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.基本概念
2.构建第一个ArkTS应用
3…
四、开发基础知识→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
五、基于ArkTS 开发→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
更多了解更多鸿蒙开发的相关知识可以参考:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3