HarmonyOS鸿蒙Next中Flutter框架多设备开发指导-高级键鼠场景

1.1 场景概述

在多设备系统开发中，不同设备的输入方式存在差异，如直板机、PAD、PC、折叠屏等设备可能使用触摸、鼠标、键盘或遥控器进行交互。为了确保高级键鼠功能在各种设备和场景下都能正常工作，提供一致的用户体验。本文将详细介绍 RN 高级键鼠组件的实现原理、适配指导以及具体的场景案例。

1.1.1 使用场景

在多设备系统、智能办公、车载系统、智慧屏等应用中，高级键鼠功能是很常见的功能，希望在不同设备上高级键鼠界面都能正常显示和交互。下面是不同设备上高级键鼠界面的差异，包括：直板机、PAD、PC、折叠屏（阔折叠、双折叠、三折叠）、智慧屏、座舱。

1.1.2 常见问题

开发过程中高级键鼠界面在不同设备上会存在差异，可能会出现以下问题：

• 鼠标事件在不同设备上响应不一致
• 键盘事件在不同设备上响应不一致
• 焦点导航在不同设备上体验不一致
• 分屏场景下交互元素被另一个应用窗口遮挡
• 横竖屏切换时布局错乱

1.1.3 多设备适配

1.1.3.1 高级键鼠多设备尺寸自适应适配

说明

根据断点布局实现高级键鼠界面的自适应：

横向断点	sm	md	lg	xl
属性	适配竖屏手机，界面自适应	适配横屏平板，界面自适应	适配折叠屏，界面自适应	适配PC端，界面自适应

1.1.3.2 高级键鼠多设备窗口变化适配

• 适配点1：基于断点实现组件自适应在多设备布局适配，窗口响应（横竖屏、分屏、折叠开合等）

• 适配点2：组件尺寸自适应覆盖拉伸、均分、占比、缩放、延伸、隐藏、折行

1.2 开发指导

1.2.1 Flutter开发

1.2.1.1 关键能力

1.2.1.2 指导案例

1、同层渲染/原生嵌入（Native Embed），嵌入原生组件，可参考platform_demo，将输入框引入到Flutter。

@Component
struct WebviewSearch {
  @ObjectLink params: Params
  @State componentIdArr: Array<string> = [];
  customView: CustomView = this.params.platformView as CustomView
  controller: SearchController = new SearchController()

  build() {
    Column({ space: MARGIN_VERTICAL }) {
      Row() {
        Search({ placeholder: PLACEHOLDER, controller: this.controller })
          .focusable(false)
          .backgroundColor(Color.White)
            // ArkWeb转发过来的鼠标事件：目前支持左键，右键点击
          .onMouse((event?: MouseEvent) => {
            if (event && event.button == MouseButton.Right) {
              // 右键响应
              this.getUIContext().getPromptAction().showToast({
                message: `鼠标右键点击`,
                duration: 2000,
                showMode: promptAction.ToastShowMode.DEFAULT,
                bottom: 80
              })
            } else if (event && event.button == MouseButton.Left) {
              // 左键响应
              this.getUIContext().getPromptAction().showToast({
                message: `鼠标左键点击`,
                duration: 2000,
                showMode: promptAction.ToastShowMode.DEFAULT,
                bottom: 80
              })
            }
          })
      }
      .justifyContent(FlexAlign.Start)
    }
    .width('100%')
  }
}

2、鼠标事件（OnMouse），在同层渲染的ETS代码中，可添加onMouse事件对点击的监听，同时弹出气泡框。代码如上。

3、轴事件（Axis Event）将当前商品的内容进行监听，当鼠标滚动时，触发气泡框。

Expanded(
  child: FocusTraversalGroup(
    child: Listener(
      onPointerSignal: (signal) {
        _showToast('鼠标滚轮滚动');
      },
      onPointerPanZoomUpdate: (signal) {
        _showToast('鼠标滚轮滚动');
      },
      child: GridView.builder(
        controller: _scrollController,
        padding: const EdgeInsets.all(12),
        itemCount: _allProducts.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: _crossAxisCount,
          crossAxisSpacing: 12,
          mainAxisSpacing: 12,
          mainAxisExtent: 300, // 固定高 300
        ),
        itemBuilder: (context, i) {
          return ProductCard(
            product: _allProducts[i],
            onBuy: () => _showToast('确认购买${_allProducts[i].title}'),
          );
        },
      ),
    ),
  ),
)

4、键盘事件（Key Event）使用FocusableActionDetector，对焦点的处理。Actions属性对键盘的Enter键进行绑定，触发时回调。

FocusableActionDetector(
  onShowFocusHighlight: (v) => setState(() => _focused = v),
  shortcuts: shortcuts,
  focusNode: _node,
  actions: <Type, Action<Intent>>{
    ActivateIntent: CallbackAction<Intent>(
      onInvoke: (_) {
        widget.onBuy();
        return null;
      },
    ),
  },
  child: ExcludeFocus(
    child: ElevatedButton(
      // 关键：按钮不再是 Tab 停靠点
      onPressed: () => {},
      style: ElevatedButton.styleFrom(
        padding: EdgeInsets.zero,
        // 避免默认 padding 影响尺寸
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.zero, // 直角方形
          side: _focused
          ? const BorderSide(color: Colors.blue, width: 2)
          : const BorderSide(width: 0, color: Colors.transparent),
        ),
        foregroundColor: Colors.black,
        // 文本/图标颜色
        backgroundColor: _focused ? Colors.red : Colors.grey,
        textStyle: const TextStyle(fontSize: 20)),
      child: const Text('购买'),
    ),
  ),
);

1.2.1.3 示例代码

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