HarmonyOS 鸿蒙Next开发案例 | 实现微信朋友圈背景下拉变化效果

HarmonyOS 鸿蒙Next开发案例 | 实现微信朋友圈背景下拉变化效果 场景介绍
组件开发过程中经常遇到组件堆叠，上层组件下拉，下层组件随之变化的场景。常见的如朋友圈背景的下拉放大，内容的下拉刷新等。本例将为大家介绍如何实现上述下拉变化的场景。

效果呈现

运行环境
本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 3.1.1 Release
• SDK: 3.1.0(API 9)

实现思路
本例的3个关键特性及实现方案如下：

• 界面不同背景的展示：通过Stack堆叠容器实现界面之间的覆盖
• 中间子组件的下拉和回弹：通过ontouch事件判断heightValue的大小去设置可滑动的中层组件的动画效果
• 底层子组件的文本变化：判断heightValuede来决定文本的变化

开发步骤

1. 通过Stack堆叠容器创建各层子组件和文本。

2. 通过ontouch事件判断heightValue的大小去设置可滑动的中层组件的动画效果。

3. 判断可滑动的中层组件的高度变化来体现标题栏的变化。

完整代码
示例完整代码如下：

参考

• Stack堆叠容器
• Toggle
• Flex