Flutter 鸿蒙化实战：flutter_inappwebview 适配 OpenHarmony

前言

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。

为了解决这个问题，CPF-Flutter 社区对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的 CPF-Flutter 组织 下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。

本篇是系列文章之一，主角是 flutter_inappwebview —— 功能最全的 Flutter WebView 插件。

flutter_inappwebview 是什么

flutter_inappwebview（原库 6.1.5）是 Flutter 生态功能最强大的 WebView 插件，鸿蒙版适配了核心能力：

• 内嵌 H5：InAppWebView 组件直接嵌入网页，配合 InAppWebViewController 控制；
• JS 与原生双向：evaluateJavascript 调用页面 JS、addJavaScriptHandler 让 H5 回调原生；
• 加载控制：loadUrl、reload、goBack、canGoBack 等导航方法；
• 请求/URL 拦截：shouldOverrideUrlLoading、shouldInterceptRequest。

典型场景：活动页、支付/登录 H5、内嵌文档/富文本等。

适配情况

Flutter 框架版本	TAG 名称	分支名
3.22	6.1.5-ohos-1.0.0	br_v6.1.5_ohos
3.27	6.1.5-ohos-1.0.0	br_v6.1.5_ohos
3.35	6.1.5-ohos-1.0.0	br_v6.1.5_ohos
已验证环境（3.35 为例）：Flutter 3.35.8-ohos-0.0.1；SDK 6.0.1(21)；DevEco Studio 6.0.1.260；ROM 6.0.0.120 SP6。

[!NOTE] 鸿蒙版当前适配 3.7 / 3.22 / 3.35 三个 Flutter 版本（3.27 未在 README 兼容列表中）。

快速接入

在 pubspec.yaml 中添加 git 依赖：

dependencies:
  flutter_inappwebview:
    git:
      url: https://gitcode.com/CPF-Flutter/flutter_inappwebview.git
      # 按你的 Flutter 框架版本，从上方映射表选择对应 TAG
      ref: 6.1.5-ohos-1.0.0

执行：

flutter pub get

使用示例

内嵌网页 + JS 调用

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class WebPage extends StatefulWidget {
  const WebPage({super.key});

  @override
  State<WebPage> createState() => _WebPageState();
}

class _WebPageState extends State<WebPage> {
  InAppWebViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView'),
        actions: [
          IconButton(
            onPressed: () async {
              final title = await _controller?.getTitle();
              // 调用页面里的 JS
              await _controller?.evaluateJavascript(source: 'window.hi && window.hi()');
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('标题：$title')));
            },
            icon: const Icon(Icons.refresh),
          ),
        ],
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: WebUri('https://example.com')),
        onWebViewCreated: (controller) => _controller = controller,
        onLoadStop: (controller, url) { /* 加载完成 */ },
        shouldOverrideUrlLoading: (controller, action) {
          // 拦截指定跳转，如跳转原生
          return NavigationActionPolicy.CANCEL;
        },
      ),
    );
  }
}

H5 调用原生

// Dart 侧注册处理器
_controller?.addJavaScriptHandler(
  handlerName: 'openNative',
  callback: (args) => Navigator.of(context).pushNamed('/detail', arguments: args),
);

H5 侧 window.flutter_inappwebview.callHandler('openNative', {...}) 即可触发。

API 支持一览（节选）

API	说明	ohos 支持
InAppWebView	内嵌网页组件	yes
InAppWebViewController	网页视图控制器	yes
evaluateJavascript	调用 JS	yes
addJavaScriptHandler	注册 JS→Dart 回调	yes
loadUrl / reload / goBack	加载与导航	yes
shouldOverrideUrlLoading	拦截 URL 加载	yes

[!TIP] ohos Support 为 yes 表示鸿蒙平台支持该能力，使用方式与 iOS / Android 保持一致。

仓库地址

• OpenHarmony 适配仓库：https://gitcode.com/CPF-Flutter/flutter_inappwebview
• 使用问题反馈：请到 CPF-Flutter 社区 Issues 提交问题（社区统一收集跟进）；本仓库 Issues 区亦可。

系列预告

截至目前，CPF-Flutter 社区已完成 250+ 个 Flutter 三方库的 OpenHarmony 平台适配，覆盖权限管理、UI 组件、设备信息、位置服务、媒体处理、网络、支付等多个领域，完整的适配清单（含每个库的版本映射表）见：

• 适配总览文档：https://gitcode.com/CPF-Flutter/docs/blob/main/ThirdpartyLibrarites.md
• 仓库组织：https://gitcode.com/CPF-Flutter

本系列后续会陆续挑选高频库展开讲解，比如权限管理（permission_handler）、数据库（sqflite）、安全存储（flutter_secure_storage）、音频播放（just_audio）等。

如果你的 Flutter 应用正在计划适配鸿蒙，欢迎关注 CPF-Flutter 组织，也欢迎参与共建。