鸿蒙flutter

100 阅读2分钟

环境变量

#export FLUTTER_HOME=/Users/zhangsan/Documents/flutter

#export PATH=$PATH:$FLUTTER_HOME/bin

#export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin

  
# 配置镜像,下载 flutter 依赖速度快

#export PUB_HOSTED_URL=https://pub.flutter-io.cn

#export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn


#homebrew

export PATH=$PATH:/opt/homebrew/bin
  

# 鸿蒙-flutter >>>>>> begin

#JDK17

export JAVA_HOME=/Users/zhangsan/Documents/jdk-17.0.12.jdk/Contents/Home

export PATH=$JAVA_HOME/bin:$PATH


#依赖缓存

#export PUB_CACHE=D:/PUB(自定义路径)  默认:~/.pub-cache


# 国内镜像, 下载 flutter 依赖速度快

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

  

# 拉取下来的flutter_flutter/bin目录

export PATH=/Users/zhangsan/Documents/flutter_flutter/bin:$PATH


# HamonyOS SDK

export TOOL_HOME=/Applications/DevEco-Studio.app/Contents # mac环境

export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk

export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin

export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin

export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

# 鸿蒙-flutter >>>>>> end

  
# MTool环境

export PATH="$PATH:$HOME/.rvm/bin"

export BIU_PATH=/Library/ibiu

export PATH=$PATH:$BIU_PATH


[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"

flutter插件鸿蒙化

适配鸿蒙的三方库

现有 Flutter 项目支持鸿蒙

OpenHarmony平台已兼容Flutter库

参考链接

flutter_flutter

搭建Harmony OS 版本的Flutter开发环境(Mac X86)

flutter 插件升级项目问题

Error: The getter 'bodyText2' isn't defined for the class 'TextTheme'

Theme.of(context).backgroundColor;   Theme.of(context).colorScheme.surface

bodyText2 → bodyMedium

bodyText1 → bodyLarge

headline6 → titleLarge

subtitle2 → titleMedium

android studio 运行 flutter 项目 模块 插件

projectmoduleplugin
ios 模拟器YESYESYES
鸿蒙 模拟器NONOYES(不稳定)
鸿蒙 模拟器 hot reloadNONOYES(不稳定)
xabc

flutter源码引入

blog.csdn.net/zackslee/ar…

mkdir ohos_flutter_module_demo

flutter create --template=module my_flutter_module

签名 my_flutter_module/.ohos

新建 ohos_app 的工程

签名 ohos_app

cp -r my_flutter_module/.ohos/flutter_module ohos_app/

cd my_flutter_module

#删除 .ohos 目录
rm -rf .ohos 

#创建软连接至鸿蒙宿主工程,根据需要更改目录名称
ln -s ../ohos_app .ohos

#编辑 ohos_app/build-profile.json5  modules
{
  "name": "flutter_module",
  "srcPath": "./flutter_module"
}

编写代码鸿蒙代码

删除 main.dart floatingActionButton

flutter run

FlutterBoost 使用方式

ios

[[FlutterBoost instance] open:options]; 触发 ios FlutterBoostDelegate pushFlutterRoute

FlutterBoostRouteOptions* options = [[FlutterBoostRouteOptions alloc] init];

options.pageName = @"flutterPage";

options.arguments = @{@"animated":@(YES)};

options.completion = ^(BOOL completion) {};

[[FlutterBoost instance] open:options]; // 触发 ios FlutterBoostDelegate pushFlutterRoute

flutter

BoostNavigator.instance.push && withContainer = true 触发 ios FlutterBoostDelegate pushFlutterRoute

//1 pageName 如果在dart配置的routerMap中没找到就会触发 ios FlutterBoostDelegate pushNativeRoute
//2.1 withContainer = true, 触发ios FlutterBoostDelegate pushFlutterRoute
//2.2 withContainer = false, 走flutter push逻辑
BoostNavigator.instance.push("flutterPage", 
   withContainer: true, // 是否以ios导航栏的方式打开, 例如: 是否嵌入UINavigationController
   arguments: <String, String?>{'from': widget.uniqueId}),
)

Navigator.of(context).pop() 触发 ios FlutterBoostDelegate popRoute

Navigator.of(context).pop()

ohos

try {
  FlutterBoost.getInstance().open('flutterPage', {}, /*opaque*/true, (pageName: string, result: Record<string, Object>) => {
    this.onPageResult(pageName, result)
  })
} catch (err) {
  hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Flutter页面');
}