HarmonyOS 鸿蒙Next中Flutter框架多设备开发指导-功能交互挂件场景

HarmonyOS 鸿蒙Next中Flutter框架多设备开发指导-功能交互挂件场景

1.1 场景概述

在移动应用开发中，不同设备的屏幕形态各异，如刘海屏、全面屏、折叠屏等，其UI差异较大，且各自存在避让区。为了确保不同设备下功能交互挂件UI位置以及尺寸展示的正确性，RN提供了一系列的适配和避让机制。本文将详细介绍功能交互挂件的实现原理以及适配指导。

1.1.1 使用场景

功能交互挂件的使用场景比较多，典型应用比如视频播放应用的暂停按钮、返回按钮等，这些挂件在不同设备以及设备的展示状态（横竖屏）下，显示的位置以及避让区域需要有所调整。本示例和设备无强相关的关系，因此下面给出根据断点分类的展示效果图。

• 图1 横向断点sm，组件大小根据断点展示效果

• 图2 横向断点md，组件大小根据断点展示效果

• 图3 横向断点lg，组件大小根据断点展示效果

• 图4 横向断点xl，组件大小根据断点展示效果

1.1.2 常见问题

1. 图文页左上角返回箭头紧贴顶部状态栏显示，导致部分点击无法选中
2. 双屏、三屏态视频播放页播放按钮显示过大
3. 三屏态连麦直播间按钮错位

1.1.3 多设备适配

适配点1：沉浸式切换（顶部状态栏的显隐）

适配点2：功能导航挂件尺寸多设备自适应适配

功能导航挂件尺寸支持在不同屏幕尺寸上自适应放大或缩小(如下图播放按钮、返回按钮)

适配点3：功能导航挂件软键盘适配

软键盘由底部呼出时，底部挂件横屏状态下可被软键盘遮挡；屏幕其他位置挂件进行自适应调整，避免被遮挡

1.2 开发指导

1.2.1 Flutter开发

1.2.1.1 关键能力

1.2.1.1.1 安全区域管理

SafeArea组件：自动避让系统状态栏、导航栏和刘海屏区域

MediaQuery：获取屏幕尺寸、安全区域padding信息

EdgeInsets计算：手动计算和应用padding值

1.2.1.1.2 系统UI控制

SystemChrome.setEnabledSystemUIMode()：控制系统UI显示模式

SystemUiMode.edgeToEdge：边到边模式（默认安全区）

SystemUiMode.immersiveSticky：沉浸式全屏模式

1.2.1.1.3 原生平台交互

MethodChannel：Flutter与原生平台双向通信

设备信息查询：通过原生接口获取设备类型（手机、平板、2in1等）

1.2.1.1.4 焦点与交互管理

FocusNode：管理组件焦点状态

HardwareKeyboard：监听硬件键盘事件

WidgetsBindingObserver：监听应用生命周期和窗口变化

1.2.1.1.5 动态布局适配

LayoutBuilder：根据约束动态调整布局

ScrollController：控制滚动行为和位置

键盘避让：监听软键盘弹出/收起，动态调整布局

1.2.1.2 指导案例

1.2.1.2.1 安全区布局场景

使用SafeArea组件自动处理系统区域避让：

Flutter侧代码示例：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      maintainBottomViewPadding: true,
      child: YourContentWidget(),
    ),
  );
}

关键点：

• SafeArea自动为内容添加padding，避让状态栏、导航栏
• maintainBottomViewPadding: true 保持底部padding

1.2.1.2.2 全屏沉浸式场景

1. 设置系统UI模式

在需要全屏时调用：

void _toggleFullScreen() {
  setState(() {
    _isFullScreen = !_isFullScreen;
  });
  if (_isFullScreen) {
    // 全屏沉浸式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  } else {
    // 恢复边到边模式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  }
}

1. 使用MediaQuery获取安全区信息

Widget build(BuildContext context) {
  final media = MediaQuery.of(context);
  final topPadding = media.padding.top; // 状态栏高度
  final bottomPadding = media.padding.bottom; // 导航栏高度
  
  return Padding(
    padding: EdgeInsets.only(
      top: topPadding,
      bottom: bottomPadding,
    ),
    child: YourContent(),
  );
}

1.2.1.2.3 原生平台通信场景

1. Flutter侧定义MethodChannel

// 定义 MethodChannel 用于与原生平台通信
const platform = MethodChannel('samples.flutter.dev/device_info');

// 调用原生方法
Future<void> _checkDeviceType() async {
  try {
    final String deviceType = await platform.invokeMethod('getDeviceType');
    setState(() {
      _isPCMode = deviceType == '2in1';
    });
  } catch (e) {
    print('获取设备类型失败: $e');
  }
}

1. 原生侧实现（HarmonyOS ArkTS）

在DeviceInfoPlugin.ets中：

import { FlutterPlugin, FlutterPluginBinding } from '@ohos/flutter_ohos';
import { MethodChannel, MethodCallHandler, MethodCall, MethodResult } from '@ohos/flutter_ohos';
import deviceInfo from '@ohos.deviceInfo';

export class DeviceInfoPlugin implements FlutterPlugin, MethodCallHandler {
  private channel: MethodChannel | null = null;

  onAttachedToEngine(binding: FlutterPluginBinding): void {
    this.channel = new MethodChannel(binding.getBinaryMessenger(), "samples.flutter.dev/device_info");
    this.channel.setMethodCallHandler(this);
  }

  onMethodCall(call: MethodCall, result: MethodResult): void {
    if (call.method == "getDeviceType") {
      const deviceType = deviceInfo.deviceType;
      result.success(deviceType);
    }
  }
}

1. 注册插件

在EntryAbility.ets中：

import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
import { DeviceInfoPlugin } from '../plugins/DeviceInfoPlugin';

export default class EntryAbility extends FlutterAbility {
  configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    this.addPlugin(new DeviceInfoPlugin());
  }
}

1.2.1.2.4 焦点与键盘交互场景

1. 焦点管理

class _WidgetHomePageState extends State<WidgetHome> {
  final FocusNode _backFocusNode = FocusNode(debugLabel: 'backButton');
  final FocusNode _playFocusNode = FocusNode(debugLabel: 'playButton');
  final FocusNode _inputFocusNode = FocusNode(debugLabel: 'inputField');

  @override
  void initState() {
    super.initState();
    _inputFocusNode.addListener(_onInputFocusChange);
    HardwareKeyboard.instance.addHandler(_handleKeyEvent);
  }

  @override
  void dispose() {
    HardwareKeyboard.instance.removeHandler(_handleKeyEvent);
    _inputFocusNode.removeListener(_onInputFocusChange);
    _backFocusNode.dispose();
    _playFocusNode.dispose();
    _inputFocusNode.dispose();
    super.dispose();
  }
}

1. 硬件键盘监听

bool _handleKeyEvent(KeyEvent event) {
  if (event is KeyDownEvent) {
    if (event.logicalKey == LogicalKeyboardKey.escape) {
      _handleBack();
      return true;
    } else if (event.logicalKey == LogicalKeyboardKey.space) {
      if (!_inputFocusNode.hasFocus) {
        _togglePlay();
        return true;
      }
    }
  }
  return false;
}

1. 软键盘避让

class _WidgetHomePageState extends State<WidgetHome>
with WidgetsBindingObserver {
  bool _isKeyboardVisible = false;
  
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted) {
        final currentSize = MediaQuery.of(context).size;
        // 检测屏幕尺寸变化判断键盘状态
        if (_lastScreenSize != null && _lastScreenSize != currentSize) {
          if (_inputFocusNode.hasFocus) {
            setState(() {
              _isKeyboardVisible = true;
            });
            _scrollToBottom(); // 滚动到输入框
          }
        }
        _lastScreenSize = currentSize;
      }
    });
  }
  
  void _scrollToBottom() {
    if (_scrollController.hasClients) {
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    }
  }
}

1.2.1.2.5 响应式布局适配

使用LayoutBuilder动态适配

Widget build(BuildContext context) {
  return SafeArea(
    child: LayoutBuilder(
      builder: (context, constraints) {
        final screenWidth = MediaQuery.of(context).size.width;
        final screenHeight = MediaQuery.of(context).size.height;
        
        // 根据屏幕尺寸计算缩放比例
        final double baseWidth = screenWidth;
        final double scale = constraints.maxWidth / baseWidth;
        
        // 自动全屏判断（如折叠屏小窗口）
        if (_shouldAutoFullScreen(screenWidth, screenHeight)) {
         _updateAutoFullScreen(screenWidth, screenHeight);
        }
        
        return YourResponsiveWidget(scale: scale);
      },
    ),
  );
}

// 判断是否需要自动全屏（如正方形小窗口）
bool _shouldAutoFullScreen(double width, double height) {
  return width < 400 && width == height;
}

1.2.1.3 示例代码

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