HarmonyOS 鸿蒙Next工程中进入flutter指定页面如何传参

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next工程中进入flutter指定页面如何传参 鸿蒙工程和flutter混编，鸿蒙工程进入到flutter指定页面如何给flutter页面传参，比如:要进入flutter版的订单详情页，需要给订单详情页传订单ID，要如何实现？下面是我在鸿蒙工程中使用的到代码:

router.pushUrl({ url: 'pages/myFlutter', params: { route: '/orderDetaill' } })
import { FlutterPage } from '@ohos/flutter_ohos'
import Log from '@ohos/flutter_ohos/src/main/ets/util/Log';
import FlutterEntry from '@ohos/flutter_ohos/src/main/ets/embedding/ohos/FlutterEntry';
import { FlutterView } from '@ohos/flutter_ohos/src/main/ets/view/FlutterView';
import router from '@ohos/router';

@Entry
@Component
struct MyFlutter {
  private flutterEntry: FlutterEntry | null = null;
  private flutterView?: FlutterView

  aboutToAppear() {
    Log.d("Flutter", "Index aboutToAppear===");
    this.flutterEntry = new FlutterEntry(getContext(this), router.getParams() as Record<string, Object>)
    this.flutterEntry.aboutToAppear()
    this.flutterView = this.flutterEntry.getFlutterView()
    this.flutterView.addFirstFrameListener(this)
  }

  onFirstFrame() {
  }

  aboutToDisappear() {
    Log.d("Flutter", "Index aboutToDisappear===");
    this.flutterEntry?.aboutToDisappear()
  }

  onPageShow() {
    Log.d("Flutter", "Index onPageShow===");
    this.flutterEntry?.onPageShow()
  }

  onPageHide() {
    Log.d("Flutter", "Index onPageHide===");
    this.flutterEntry?.onPageHide()
  }

  build() {
    FlutterPage({ viewId: this.flutterView?.getId() })
  }
}

更多关于HarmonyOS 鸿蒙Next工程中进入flutter指定页面如何传参的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
2 回复

可以使用FlutterBoost，参考链接：https://github.com/0xZOne/ohos-flutter-add2app

更多关于HarmonyOS 鸿蒙Next工程中进入flutter指定页面如何传参的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在HarmonyOS鸿蒙Next工程中，如果你希望在Flutter应用中进入指定页面并传递参数，可以通过以下方式进行：

  1. 路由配置： 首先，在Flutter的路由配置中，你需要为目标页面定义一个路由名称。这通常在MaterialApp或CupertinoApp的routes属性中进行设置。

  2. 参数传递： 使用Navigator.pushNamed方法时，可以通过arguments参数传递数据。例如：

    Navigator.pushNamed(
  context,
  'yourRouteName',
  arguments: {
    'key1': 'value1',
    'key2': 123,
  },
);

  3. 接收参数： 在目标页面的onGenerateRoute或build方法中，可以通过ModalRoute.of(context).settings.arguments获取传递的参数。例如：

    class YourTargetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Map<String, dynamic> args = ModalRoute.of(context).settings.arguments as Map<String, dynamic>;
    final String value1 = args['key1'] as String;
    final int value2 = args['key2'] as int;
    
    // 使用参数进行页面构建
  }
}

以上步骤实现了在HarmonyOS鸿蒙Next工程中，Flutter应用进入指定页面并传递参数的基本流程。如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部