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 插件鸿蒙版适配了核心能力内嵌 H5InAppWebView组件直接嵌入网页配合InAppWebViewController控制JS 与原生双向evaluateJavascript调用页面 JS、addJavaScriptHandler让 H5 回调原生加载控制loadUrl、reload、goBack、canGoBack等导航方法请求/URL 拦截shouldOverrideUrlLoading、shouldInterceptRequest。典型场景活动页、支付/登录 H5、内嵌文档/富文本等。适配情况Flutter 框架版本TAG 名称分支名3.226.1.5-ohos-1.0.0br_v6.1.5_ohos3.276.1.5-ohos-1.0.0br_v6.1.5_ohos3.356.1.5-ohos-1.0.0br_v6.1.5_ohos已验证环境3.35 为例Flutter 3.35.8-ohos-0.0.1SDK 6.0.1(21)DevEco Studio 6.0.1.260ROM 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 框架版本从上方映射表选择对应 TAGref:6.1.5-ohos-1.0.0执行flutter pub get使用示例内嵌网页 JS 调用importpackage:flutter/material.dart;importpackage:flutter_inappwebview/flutter_inappwebview.dart;classWebPageextendsStatefulWidget{constWebPage({super.key});overrideStateWebPagecreateState()_WebPageState();}class_WebPageStateextendsStateWebPage{InAppWebViewController?_controller;overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(WebView),actions:[IconButton(onPressed:()async{finaltitleawait_controller?.getTitle();// 调用页面里的 JSawait_controller?.evaluateJavascript(source:window.hi window.hi());ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text(标题$title)));},icon:constIcon(Icons.refresh),),],),body:InAppWebView(initialUrlRequest:URLRequest(url:WebUri(https://example.com)),onWebViewCreated:(controller)_controllercontroller,onLoadStop:(controller,url){/* 加载完成 */},shouldOverrideUrlLoading:(controller,action){// 拦截指定跳转如跳转原生returnNavigationActionPolicy.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内嵌网页组件yesInAppWebViewController网页视图控制器yesevaluateJavascript调用 JSyesaddJavaScriptHandler注册 JS→Dart 回调yesloadUrl / reload / goBack加载与导航yesshouldOverrideUrlLoading拦截 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 组织也欢迎参与共建。