HarmonyOS 鸿蒙Next中该效果如何实现？

HarmonyOS 鸿蒙Next中该效果如何实现？ 【问题描述】我们需要实现类似视频中的效果，将图片列表组件整个滑动到顶部后，才能继续滑动图片列表组件内部中的内容。但由于这个图片来源是系统图库，我们一开始想着使用的PhotoPicker，但PhotoPicker无法实现这样的效果，我们去申请ohos.permission.READ_IMAGEVIDEO权限也并未通过，有没有更好的方案来实现这样的效果？

【问题现象】

见附件视频

【尝试解决方案】尝试过通过nestedScroll来达成该效果，但PhotoPicker不支持这个属性。

5 回复

开发者你好，

API23新增参数isSlidingSupported，开发者可以利用该参数，在picker未达到指定位置时屏蔽PhotoPickerComponent的滚动，由父组件响应手势事件。

请点击如下链接申请，并在此回复反馈您的开发者ID，审核通过后将为您开放DevEco Studio等开发工具和开发文档权限。

更多关于HarmonyOS 鸿蒙Next中该效果如何实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


外层滚动容器（如croll），内部嵌套一个可滚动的图片列表组件（如List或Grid），然后通过nestedScroll属性控制滚动优先级试试。

现在我们就是需要实现这样的效果，但我们的图片数据来源是图库，只能通过权限或者Picker来获取，权限申请没通过，Picker无法满足我们的效果需求

在HarmonyOS Next中，实现该效果主要使用ArkTS声明式UI开发。通过ArkUI组件（如Column、Row、Flex）进行布局，结合状态管理（@State、@Prop等装饰器）驱动UI动态更新。动画效果可使用显式动画（animateTo）或属性动画实现。具体组件如Swiper可实现轮播，Canvas可用于自定义绘制。

在HarmonyOS Next中实现这种嵌套滚动效果，推荐使用Scroll组件配合NestedScroll机制。由于PhotoPicker是系统组件且不支持自定义嵌套滚动，你需要自己实现图片选择器组件。

具体方案：

  1. 自定义图片选择器：

    • 使用媒体查询获取系统图库图片
    • 申请ohos.permission.READ_IMAGEVIDEO权限（需在module.json5中声明并在运行时动态申请）
    • 使用Grid或List组件展示图片缩略图

  2. 嵌套滚动实现：

    Scroll() {
  // 顶部区域
  Column() {
    // 你的顶部内容
  }
  .height('100%')
  
  // 图片列表区域
  Scroll() {
    LazyForEach(this.imageList, (item: ImageItem) => {
      GridItem() {
        Image(item.uri)
          .aspectRatio(1)
      }
    })
  }
  .nestedScroll({
    scrollForward: NestedScrollMode.SELF_FIRST,
    scrollBackward: NestedScrollMode.SELF_FIRST
  })
  .scrollBar(BarState.Off)
}

  3. 关键配置：

    • 外层Scroll设置scrollable(ScrollDirection.Vertical)
    • 内层Scroll设置合适的nestedScroll模式
    • 使用LazyForEach优化大量图片的性能

  4. 权限处理：

    // 在Ability中动态申请权限
import abilityAccessCtrl from '[@ohos](/user/ohos).abilityAccessCtrl';

const requestPermissions = async () => {
  const permissions: Array<string> = ['ohos.permission.READ_IMAGEVIDEO'];
  const atManager = abilityAccessCtrl.createAtManager();
  await atManager.requestPermissionsFromUser(this.context, permissions);
}

这样就能实现先滑动外层到顶部，再滑动内层图片列表的效果。

回到顶部