鸿蒙(HarmonyOS)应用开发实战——首页下拉进入二楼效果案例

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 被裁员后，踏上了鸿蒙开发求职之路
• 持续更新中……

介绍

本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。

效果图预览

使用说明

1. 向下滑动首页页面超过触发距离，页面进入二楼，未超过触发距离页面回弹。
2. 二楼页面向上滑动超过触发距离，页面进入首页，未超过触发距离页面回弹。
3. 效果图因要展示动效效果对展开速度进行了调整，可以通过 SecondFloor.ets 中的OFFSET_STEP和EXPAND_FLOOR_INTERVAL_TIME来调整二楼展开的速度，同理也可通过 FloorView.ets 中的OFFSET_STEP和EXPAND_FLOOR_INTERVAL_TIME来调整一楼展开的速度

实现思路

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

1. 使用Column布局将一楼页面二楼页面包裹，使用position将一、二楼页面固定，floorHeight设置二楼高度（初始Y轴为负的二楼高度），使用clip按指定的形状对当前组件进行裁剪

Column() {
   
  // 二楼页面
  Column() {
   
    this.floorViewBuilder();
  }
  // 固定二楼刚开始位置
  .position({
   
    x: 0,
    // Y轴大小
    y: this.mainPageOffsetY
  })
  ...
  // 一楼页面
  Column() {
   
    this.mainPageBuilder();
  }
  .position({
   
    x: 0,
    // Y轴大小加上二楼高度
    y: this.offsetY + this.floorHeight
  })
}
.clip(true) // TODO：知识点：按指定的形状对当前组件进行裁剪，参数为boolean类型时，设置是否按照父容器边缘轮廓进行裁剪。

2. 通过对Column设置onTouch属性，记录手指按下和离开屏幕Y轴坐标，判断手势是上/下滑，当下滑距离达到触发距离进入二楼，未达到触发距离页面回弹（以一楼页面下滑为例）

Column() {
   
  ...
  // 一楼页面
  Column() {
   
    this.mainPageBuilder();
  }
  ...
}
  .onTouch((event) => {
   
    switch (event.type) {
   
      case TouchType.Down