HarmonyOS鸿蒙Next中Flutter插件如何打开一个原生页面

HarmonyOS鸿蒙Next中Flutter插件如何打开一个原生页面

基于DocumentScanner来实现文档识别功能，希望flutter端触发scanDocument时，插件鸿蒙端打开文档识别页面。

目前尝试在插件端使用Navigation，根据文档配置router_map等，在方法中调用pushPathByName不起效

startDocScan(folderPath: String, maxDocumentLimit: number, currentDocumentCount: number, docType: String) {
    this.pageStack.pushPathByName('DocScannerPage', null, true);
}

router_map:

{
  "routerMap": [
    {
      "name": "DocScannerPage",
      "buildFunction": "DocScannerPageBuilder",
      "pageSourceFile": "src/main/ets/components/plugin/views/DocScannerPage.ets"
    }
  ]
}

module.json5:

{
  "module": {
    "name": "",
    "routerMap": "$profile:router_map",
    "type": "har",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "requestPermissions": []
  }
}

更多关于HarmonyOS鸿蒙Next中Flutter插件如何打开一个原生页面的实战教程也可以访问 https://www.itying.com/category-92-b0.html

8 回复 
export class NavFlutterEntry extends FlutterEntry {
  pathStack?: NavPathStack;

  constructor(context: Context, params: Record<string, Object> = {}, pathStack?: NavPathStack) {
    super(context, params)
    this.pathStack = pathStack;
  }

  popSystemNavigator(): boolean {
    if (this.pathStack) {
      this.pathStack.pop();
      return true;
    }
    return false;
  }
  configureFlutterEngine(flutterEngine: FlutterEngine): void {
    super.configureFlutterEngine(flutterEngine);
    GeneratedPluginRegistrant.registerWith(flutterEngine);
    this.delegate?.addPlugin(new RouterPlugin());
  }
}

更多关于HarmonyOS鸿蒙Next中Flutter插件如何打开一个原生页面的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


楼主，能给个全一点的demo吗？pageStack是哪来的？navigation的路由栈对象navPathStack一般在page或component中可以获取。

FlutterDocScannerPlugin

成员变量

  • context: common.UIAbilityContext | null
  • ability: UIAbility | null
  • docScanConfig: DocumentScannerConfig
  • channel: MethodChannel | null
  • pageStack: NavPathStack

构造函数

constructor() {}

方法

onAttachedToAbility

onAttachedToAbility(binding: AbilityPluginBinding): void {
  this.context = binding.getAbility().context;
  this.ability = binding.getAbility();
}

onDetachedFromAbility

onDetachedFromAbility(): void {
  throw new Error('Method not implemented.');
}

getUniqueClassName

getUniqueClassName(): string {
  return "FlutterDocScannerPlugin"
}

onAttachedToEngine

onAttachedToEngine(binding: FlutterPluginBinding): void {
  this.channel = new MethodChannel(binding.getBinaryMessenger(), "flutter_doc_scanner");
  this.channel.setMethodCallHandler(this)
}

onDetachedFromEngine

onDetachedFromEngine(binding: FlutterPluginBinding): void {
  if (this.channel != null) {
    this.channel.setMethodCallHandler(null)
  }
}

onMethodCall

onMethodCall(call: MethodCall, result: MethodResult): void {
  if (call.method == "getPlatformVersion") {
    result.success(deviceInfo.osFullName)
  } else if (call.method == "scanDocument") {
    this.startDocScan()
  }
}

startDocScan

startDocScan() {
  this.pageStack.pushPathByName('DocScannerPage', null, true);
}

因为是个flutter插件，所以时需要主动打开页面的，

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

你这样直接new拿不到navigation的路由栈的，如果是router可以这么用，navigation需要从flutterentry的构造参数里把navpathStack传过来，代码参考下我下面的楼层，

在HarmonyOS鸿蒙Next中使用Flutter插件打开原生页面，需通过FFI（Foreign Function Interface）或平台通道实现交互。Flutter侧使用MethodChannel发送请求，鸿蒙原生侧在Ability中接收并处理。具体步骤：1) Flutter调用MethodChannel.invokeMethod；2) 鸿蒙侧在onMethodCall回调中创建并启动目标页面；3) 使用Intent或Want传递参数。需确保pubspec.yaml配置了鸿蒙平台通道依赖，并在原生模块注册方法处理器。

在HarmonyOS Next中实现Flutter插件调用原生页面，需要注意以下几点：

  1. 确保router_map.json配置正确，路径需使用相对路径：
{
  "routerMap": [
    {
      "name": "DocScannerPage",
      "buildFunction": "DocScannerPageBuilder",
      "pageSourceFile": "./components/plugin/views/DocScannerPage.ets"
    }
  ]
}
  1. 在module.json5中需要正确声明routerMap：
"routerMap": "$profile:router_map"
  1. 页面跳转代码需要获取当前UIAbility的context：
import { AbilityContext } from '@ohos/ability.featureAbility';

startDocScan() {
  let context = AbilityContext.getContext();
  context.pageStack.pushPathByName('DocScannerPage', null, true);
}
  1. 确保DocScannerPage.ets文件导出了正确的Builder函数：
@Builder
export function DocScannerPageBuilder() {
  DocScannerPage();
}

常见问题排查：

  1. 检查文件路径是否正确
  2. 确认module.json5中routerMap配置无误
  3. 确保Builder函数已正确导出
  4. 检查AbilityContext是否正确获取

如果仍然无法跳转，建议检查日志输出获取更多错误信息。

回到顶部