鸿蒙HarmonyOS NEXT实战开发：滑动页面信息隐藏与组件位移效果实现案例

介绍

在很多应用中，向上滑动"我的"页面，页面顶部会有如下变化效果：一部分信息逐渐隐藏，另一部分信息逐渐显示，同时一些组件会进行缩放或者位置移动。向下滑动时则相反。

效果图预览

使用说明

1. 向上滑动页面，出现如下变化：用户名/选择身份/设置图标/客服图标逐渐隐藏，用户头像尺寸逐渐缩小并向右上平移，顶部"返回"文本后方用户名逐渐显示。
2. 滑动到顶部后，向下滑动页面，出现如下变化：用户头像尺寸逐渐变大并向左下平移，顶部"返回"文本后方的用户名逐渐隐藏，原来的用户名/选择身份/设置图标/客服图标逐渐显示。

实现思路

本例涉及的关键特性和实现方案如下：

1. 将屏幕从上向下分为三部分，第一部分Row组件包含"返回"和初始状态下隐藏的用户名，第二部分Row包含用户头像/用户名/选择身份/设置/客服，下方其余部分位第三部分。本例场景的变化体现在第一和第二部分。

Column() {
  Row() {...}
  .padding($r('app.integer.slidetohideanddisplace_padding_small'))
  .width($r('app.string.slidetohideanddisplace_size_full'))
  .alignItems(V