HarmonyOS鸿蒙NEXT Scroll容器嵌套多种组件事件处理案例

HarmonyOS鸿蒙NEXT Scroll容器嵌套多种组件事件处理案例 HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：代码仓库

本案例已上架 HarmonyOS NEXT 开源组件市场，如需获取或移植该案例，可安装此插件。开发者可使用插件获取鸿蒙组件，添加到业务代码中直接编译运行。

介绍

本示例适用于Scroll容器嵌套多组件事件处理场景：当需要一个父容器Scroll内嵌套web、List，当父子的滚动手势冲突时，此时希望父容器的滚动优先级最高，即实现子组件的偏移量都由父容器统一派发，实现滚动任一子组件流畅滚动到父容器顶/底的效果。例如本案例的新闻浏览界面，父组件Scroll嵌套了新闻内容与评论区（Web实现新闻内容，List实现评论区），通过禁用web和list组件滚动手势，再由父组件Scroll统一计算派发偏移量，达到一种web的滚动和list组件滚动能无缝衔接，像同一个滚动组件滚动效果。

效果图预览

新闻浏览界面滚动效果

使用说明

  1. 点击Scroll容器嵌套多种组件事件处理案例。
  2. 页面向下滚动直到页面底部，无卡顿现象。
  3. 从页面底部向上滚动直到页面顶部，无卡顿现象。

实现思路

概述：使用Scroll嵌套Web和List组件实现。Scroll作为父组件响应滚动手势，Web和List组件禁用滚动手势，滚动偏移量由父组件Scroll给Web和List组件派发。

即通过在Scroll.onScrollFrameBegin()每帧开始滚动时触发，将Scroll返回的实际滚动量的offset，通过scrollBy(0, offset)方法，将Scroll的偏移量派发给Web、List。

滚动偏移量派发逻辑：

  • 手指向上划动(页面下滑)：

    1. 如果Web没有滚动到底部，Scroll将滚动偏移量派发给Web，Scroll组件自身不滚动。
    2. 如果Web滚动到底部，Scroll没有滚动到底部，则Scroll自身滚动，不给Web和List派发滚动偏移量。
    3. 如果Scroll滚动到底部，则滚动偏移量派发给List，Scroll自身不滚动。

  • 手指向下划动(页面上滑)：

    1. 如果List没有滚动到顶部，则Scroll将滚动偏移量派发给List，Scroll自身不滚动。
    2. 如果List滚动到顶部，Scroll没有滚动到顶部，则Scroll自身滚动，不给Web和List派发滚动偏移量。
    3. 如果Scroll滚动到顶部，则滚动偏移量派发给Web，Scroll自身不滚动。

高性能知识点

  • 动态加载数据场景可以使用 LazyForEach 遍历数据。
  • 本例使用扁平化布局优化嵌套层级，建议采用相对布局 RelativeContainer 进行扁平化布局，有效减少容器的嵌套层级，减少组件的创建时间。

工程结构 & 模块类型

containernestedslide                            // har类型
|---src/main/ets/view
|   |---CommentInputDialog.ets                  // 视图层-输入评论弹窗组件
|   |---CommentPage.ets                         // 视图层-评论组件
|   |---NewsDetailPage.ets                      // 视图层-主页
|   |---Scroller.ets                            // 视图层-父容器偏移量派发组件
|---model
|   |---TextFlowModel.ets                       // 模型层-评论数据类 
|---mock
|   |---DetailData.ets                          // 模拟数据模块

模块依赖

[@ohos/routermodule(动态路由)](https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/common/routermodule)

参考资料


更多关于HarmonyOS鸿蒙NEXT Scroll容器嵌套多种组件事件处理案例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙NEXT Scroll容器嵌套多种组件事件处理案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙NEXT中，Scroll容器嵌套多种组件时，事件处理需要注意以下几点：

事件分发机制

鸿蒙系统采用事件分发机制来管理用户交互。Scroll容器作为父容器，负责管理子组件的事件分发。当用户触控屏幕时，事件首先传递给Scroll容器，然后根据子组件的位置和层级进行分发。

事件拦截

在嵌套组件中，如果Scroll容器需要拦截某些事件（如滑动事件），可以通过重写onInterceptTouchEvent方法来实现。这样可以确保Scroll容器在接收到滑动事件时优先处理，而不是传递给子组件。

事件消费

子组件可以通过重写onTouchEvent方法来消费事件。如果子组件消费了事件，事件将不再向上传递给父容器。例如，如果子组件处理了点击事件，Scroll容器将不会接收到该事件。

事件冲突处理

在嵌套多种组件时，可能会出现事件冲突。例如，子组件需要处理点击事件，而Scroll容器需要处理滑动事件。可以通过调整事件的消费顺序或使用requestDisallowInterceptTouchEvent方法来避免冲突。

示例代码

class MyScrollContainer extends ScrollContainer {
    onInterceptTouchEvent(event: TouchEvent): boolean {
        // 拦截滑动事件
        return true;
    }
}

class MyComponent extends Component {
    onTouchEvent(event: TouchEvent): boolean {
        // 处理点击事件
        return true;
    }
}

// 在布局中使用
let scrollContainer = new MyScrollContainer();
let myComponent = new MyComponent();
scrollContainer.addComponent(myComponent);
回到顶部