HarmonyOS鸿蒙Next中Flutter框架多设备开发指导-交互归一场景

HarmonyOS鸿蒙Next中Flutter框架多设备开发指导-交互归一场景

1.1 场景概述

在移动应用开发中，不同设备的屏幕形态各异，例如刘海屏、全面屏、折叠屏等，系统状态栏、导航栏、软键盘等元素亦会占据屏幕空间。同一业务往往既要服务小屏触摸，也要服务大屏指针与滚轮；若列表、详情、分栏、拖拽等能力按平台各写一套，易出现状态分叉、手势争抢、动画与数据不同步。在统一的数据模型与页面结构下，将不同输入映射到相近交互语义，可让用户换设备仍觉得「还是同一个功能」。本文将详细介绍交互归一中的断点、手势与指针协同方法，以及实现原理与具体场景案例。本文对应工程内交互归一示例页。

1.1.1 使用场景

用户在手机上习惯长按拖拽、双指缩放，在电脑窗口上希望悬停有反馈、滚轮能切页、修饰键配合指针完成缩放旋转，而不觉得换了一套完全不同的应用。下面是不同横向断点下类电脑能力与控件尺度的示意。

交互归一适配验证（设备交互归一界面自适应），指的是同一套业务界面能够根据输入设备能力与窗口条件（断点、逻辑宽高），自动启用或关闭悬停、滚轮、指针修饰键等能力，并将触摸与指针映射到统一的语义与动画状态，以提供跨设备一致、控制逻辑不割裂的交互体验的布局方法。

横向断点	sm	md	lg	xl
展示逻辑	默认双列网格；边距与卡片最小高度基准较小；详情主卡片按短边比例计算，竖屏占比更高；无指针悬停与滚轮切页	缩放系数与水平边距、卡片间距略增；分栏轨道与收藏区高度随窗口拉高	缩放系数与水平边距、卡片间距略增；分栏轨道与收藏区高度随窗口拉高，控件与字体再放大一档	视为大平板档；若同时满足逻辑宽不小于约一千且高不小于约六百，或与特大型档组合判定为类电脑
展示布局

1.1.2 常见问题

交互归一类界面需要同时响应触摸、指针与系统手势，在横竖屏、分屏与窗口尺寸变化下若未统筹，容易出现以下问题：

• 长按拖拽进行中列表仍在滚动，手势被滚动视图抢走，拖拽断断续续
• 长按与单击边界不清，松手误进详情或误触菜单
• 分栏滑块与列表拖拽同层竞争，一方无法响应
• 滚轮事件无节流，快速滚动导致切页抖动

1.1.3 多设备适配

• 适配点 1：结合断点、横竖屏、窗口短边与「类电脑」标志，计算卡片宽度占比、图标尺寸上下限、详情区正方形边长上限（避免压住顶栏标题），使主列表与详情在手机竖屏、横屏下布局合理、可操作区域足够。

图 1-1：手机竖屏下列表网格、分栏滑块与长按拖拽收藏示意。

图 1-2：手机横屏下详情页双指缩放与横向滑动切页示意。

• 适配点 2：在类电脑全屏或窗口模式下验证指针悬停、滚轮切页、Ctrl 拖动与详情内单层指针封装；收窄窗口或档位回落时，能力自动关闭，避免小窗误触滚轮切页。

图 2-1：电脑全屏下悬停高亮。

图 2-2：长按就绪与阈值分离示意。

PC

手机

图 2-3：拖拽预览与收藏区配合。

PC

手机

图 2-4：详情双指缩放与旋转。

PC

手机

图 2-5：详情左右轻扫切页。

PC

手机

1.2 开发指导

1.2.1 Flutter开发

1.2.1.1 关键能力

1.2.1.2 指导案例

1. 悬浮事件（OnHover）可使用MouseRegion组件，当鼠标悬停时可触发回调

MouseRegion(
  cursor: SystemMouseCursors.grab,
  onEnter: (_) => setState(() => _hoverIndex = index),
  onExit: (_) => {
    if (_hoverIndex == index)
    {setState(() => _hoverIndex = null)}
  },
  child: _buildImg(highlight: _hoverIndex == index),
),

1. 单击事件（OnClick） GestureDetector的onTap属性

GestureDetector(
  onTap: () {
    Navigator.push(
     context,
     MaterialPageRoute(builder: (context) => const DetailPage()),
    );
  }
)

1. 双击事件（Double Click）GestureDetector的onDoubleTap属性

GestureDetector(
  onDoubleTap: ()=>{}
)

1. 长按事件（Long Press）GestureDetector的onLongPress属性

GestureDetector(
  onLongPress: ()=>{}
)

1. 上下文菜单（Context Menu）

GestureDetector(
  onLongPress: ()=>{}
)

1. 拖拽事件（Drag）可使用LongPressDraggable，包括可在原位置修改，拖拽中修改等等属性

LongPressDraggable<String>(
  data: 'img-$index',
  // 拖拽开始/结束：控制原图高亮
  onDragStarted: () => setState(() => {}),
  onDragEnd: (_) => setState(() {}),
  onDraggableCanceled: (_, __) => setState(() {}),
  dragAnchorStrategy: (draggable, context, position) {
    final box = context.findRenderObject() as RenderBox;
    final topLeft =
    box.localToGlobal(Offset.zero); // child 左上角全局坐标
    return position - topLeft; // 触点相对 child 左上角偏移
  },
  // 跟手移动的"浮层图"
  feedback: Material(
    type: MaterialType.transparency, // 关键：透明材质
    child: _buildImg(highlight: true),
  ),
  // 拖拽期间原位显示（高亮/可半透明）
  childWhenDragging: _buildImg(highlight: false),
  // 原位正常显示
  child: MouseRegion(
    cursor: SystemMouseCursors.grab,
    onEnter: (_) => setState(() => _hoverIndex = index),
    onExit: (_) => {
      if (_hoverIndex == index)
      {setState(() => _hoverIndex = null)}
    },
    child: _buildImg(highlight: _hoverIndex == index),
  )
),

1. 轻扫事件（Swipe）可在yaml文件引入card_swiper : ^3.0.0 插件方式进行使用

2. 滚动事件（Scroll）对区域进行监听addPostFrameCallback

WidgetsBinding.instance.addPostFrameCallback((_) {
 if (!_controller.hasClients) return;

  _scrollingListener = () {
   final scrolling = _controller.position.isScrollingNotifier.value;
  
    if (scrolling) {
     _isScrolling = true;
     _show('正在滚动');
    } else {
      if (_isScrolling) {
        _isScrolling = false;
        _show('滚动结束');
        _hideLater(); // 显示一会儿后消失
      }
    }
  };

  _controller.position.isScrollingNotifier.addListener(_scrollingListener!);
});

1. 平移事件（Pan）

https://gitcode.com/openharmony-tpc/flutter_samples/blob/master/ohos/multidevice_adaption_sample_flutter/lib/interaction/DetailPage.dart

1. 缩放事件/旋转事件（Pinch / Rotation）GestureDetector的onScaleUpdate的属性。Transform属性

1.2.1.3 示例代码

相机的Sample示例代码地址：example ，开发者可以通过该地址查看完整的示例代码，并根据自己的需求进行修改和扩展。