HarmonyOS 鸿蒙Next 左右滑动半屏进/出场 案例

发布于 1周前 作者 wuwangju 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 左右滑动半屏进/出场

介绍

image.png

可左右滑动窗口 Stack内两个组件通过手势滑动，控制两个组件位置及缩放； 使用[@PerformanceAnalysisKit](/user/PerformanceAnalysisKit)包中的hilog，打印调试信息； 使用[@kit](/user/kit).ArkUI包中的window,获取窗口的属性，具体是获取窗口的位置和大小信息。

HarmonyOS 鸿蒙Next 左右滑动半屏进/出场 案例 demo详情链接

https://gitee.com/scenario-samples/stack-component


更多关于HarmonyOS 鸿蒙Next 左右滑动半屏进/出场 案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 左右滑动半屏进/出场 案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中实现左右滑动半屏进/出场的鸿蒙场景化代码，可以通过以下方式实现。这里主要使用ArkUI（eTS，即Extensible TypeScript）进行描述：

@Entry
@Component
struct SlideHalfScreen {
  @State private isSliding: boolean = false;

  @Builder onSwipe(event: SwipeEvent) {
    if (event.direction === 'left') {
      this.isSliding = true;
      // 执行左滑进场动画和逻辑
    } else if (event.direction === 'right') {
      this.isSliding = false;
      // 执行右滑出场动画和逻辑
    }
  }

  build() {
    Column() {
      if (this.isSliding) {
        // 半屏显示内容布局
        HalfScreenContent()
      } else {
        // 全屏显示内容布局
        FullScreenContent()
      }
    }.onSwipe(this.onSwipe)
  }
}

@Component
struct HalfScreenContent {
  // 半屏显示的具体内容
}

@Component
struct FullScreenContent {
  // 全屏显示的具体内容
}

上述代码通过监听滑动事件（onSwipe），根据滑动方向控制半屏显示内容的显示与隐藏。HalfScreenContent和FullScreenContent组件分别定义了半屏和全屏显示的具体内容。

回到顶部