HarmonyOS鸿蒙Next中flutter容器使用arkweb渲染
HarmonyOS鸿蒙Next中flutter容器使用arkweb渲染 flutter容器使用arkweb渲染的页面，业务没有相关逻辑，鼠标滚轮滑动会异常触发web组件的.onTouch事件（触发了down和move，但缺少up）。
开发者您好，若您是指设置了onTouch事件，但是鼠标滚轮滑动意外触发该事件，则可以在您的onTouch事件中添加前置条件为 event.sourceTool === SourceTool.Finger 限制输入源为手指输入才能触发相关事件。
示例代码如下：
@Entry
@Component
struct TouchExample {
@State text: string = '';
@State eventType: string = '';
build() {
Column() {
Button('Touch').height(40).width(100)
.onTouch((event?: TouchEvent) => {
if (event && event.sourceTool === SourceTool.Finger) {
if (event.type === TouchType.Down) {
this.eventType = 'Down';
}
if (event.type === TouchType.Up) {
this.eventType = 'Up';
}
if (event.type === TouchType.Move) {
this.eventType = 'Move';
}
if (event.type === TouchType.Cancel) {
this.eventType = 'Cancel';
}
if (event.touches) {
this.text = 'TouchType:' + this.eventType
+ '\nDistance between touch point and touch element:'
+ '\n x: ' + event.touches[0].x + '\n y: ' + event.touches[0].y
+ '\n width: ' + event.touches[0].width + '\n height: ' + event.touches[0].height
+ '\n pressedTime: ' + event.touches[0].pressedTime
+ '\n pressure: ' + event.touches[0].pressure
+ '\nComponent globalPos:'
+ '\n x: ' + event.target.area.globalPosition.x + '\n y: ' + event.target.area.globalPosition.y
+ '\n width: ' + event.target.area.width + '\n height: ' + event.target.area.height
+ '\ntargetDisplayId: ' + event.targetDisplayId;
}
}
})
Text(this.text)
}.width('100%').padding(30)
}
}
若是不能解决您的问题，麻烦请提供以下信息：
1.复现代码（如：最小复现demo）
2.版本信息（如：开发工具、手机系统版本信息）
更多关于HarmonyOS鸿蒙Next中flutter容器使用arkweb渲染的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
这个现象更像是鼠标滚轮输入被 Flutter 容器/ArkWeb 适配层映射到了触摸链路，但滚轮本身并不是完整的 touch 手势，所以只看到 down/move、没有 up。业务上不要依赖 Web 的 touchend 去收尾滚轮交互，建议分两层处理：Flutter 侧优先拦截 PointerSignalEvent/滚轮滚动，不把它当普通触摸；Web 页面里同时监听 wheel/scroll，用节流后的滚动结束逻辑兜底。如果同一页面在纯 ArkWeb 或纯 Flutter WebView 中正常、只在 Flutter 容器嵌 ArkWeb 时异常，建议整理一个最小 demo，重点反馈“滚轮触发 touch 但缺少 up”的输入事件兼容问题。
在HarmonyOS Next中，Flutter容器通过平台通道调用ArkWeb组件实现Web渲染。开发时需在Flutter项目中集成鸿蒙化插件，替换默认WebView为ArkWeb。ArkWeb支持Web标准的API，通过@ohos.web.webview接口与Flutter交互。
