Flutter 开发环境部署,鸿蒙开发环境部署。

设备:IOS15.4Beta (MacBook Pro M1)

一、根据下面这个指导安装 flutter 和 鸿蒙开发环境

鸿蒙突击队/flutter

注意

有错误,应为 https://gitee.com/harmonycommando_flutter/flutter.git

open -e ~/.zshrc 

source  ~/.zshrc 

使设置生效

二、安装IOS开发环境:

制作 iOS 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

三、安装Android开发环境

制作 Android 应用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

期间执行多次执行  flutter doctor -v 查看有哪些缺失,补上。最终如下:

open -e ~/.zshrc  内容如下给大家参考:

# Add RVM to PATH for scripting. Make sure this is the last PATH variable change.
export PATH="$PATH:$HOME/.rvm/bin"
export PATH="/opt/homebrew/opt/ruby/bin:$PATH"
export PATH=$PATH:/Users/qihoo/Library/Android/sdk/platform-tools
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH:.
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents
export DEVECO_SDK_HOME=$TOOL_HOME/sdk
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH
export PATH=$TOOL_HOME/tools/node/bin:$PATH
export PATH=$TOOL_HOME/sdk/default/openharmony/toolchains:$PATH
export PUB_CACHE=/Users/qihoo/HMPUB_CACHE
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#export PATH=/Users/qihoo/flutter_flutter/bin:$PATH #old
export PATH=/Users/qihoo/flutter/bin:$PATH
export FLUTTER_GIT_URL=https://gitee.com/harmonycommando_flutter/flutter.git
 

四、已有的项目根目录,ios 等平级下执行创建鸿蒙环境:

flutter create --platforms ohos .

或者创建新项目

create创建新项目flutter create --platforms ohos,android,ios --org <org> <appName>

五、异常

编译鸿蒙包提示签名:

flutter build hap --target-platform ohos-arm64 --debug

请通过DevEco Studio打开项目根目录的 ohos 工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选Automatically generate signature)

结果页面空白页面,以下是处理方法:

我的mac无用:

导致该问题的可能原因为电脑GPU不兼容,或在云桌面的场景下使用DevEco Studio。 在DevEco Studio中双击Shift,在弹出的窗口中搜索Registry…,在Registry页面中勾选ide.browser.jcef.gpu.disable 项,关闭窗口并重启DevEco Studio即可。

我的mac有用:

ide.browser.jcef.sandbox.enable 取消勾选重启

六、现在可以打开 VC 开心的 code了:

flutter run

flutter devices

### Flutter与HarmonyOS集成教程 #### 创建项目结构 为了实现Flutter和HarmonyOS的混合开发,首先需要准备一个支持多平台的Flutter项目。在命令行中执行如下操作来初始化一个新的Flutter项目: ```bash flutter create harmony_flutter_app cd harmony_flutter_app ``` 这会建立一个基础的Flutter应用程序框架。 #### 配置DevEco Studio 对于鸿蒙操作系统特有的功能调用和支持,推荐使用官方提供的[HUAWEI DevEco Studio](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/studio_download-0000001053897246),该工具专门为鸿蒙生态定制化设计[^3]。安装完成后,在`File -> New -> Import Project...`导入之前创建好的Flutter项目文件夹路径下的`.idea`目录,以便于后续针对鸿蒙特性的优化调整工作。 #### 添加依赖项 编辑项目的`pubspec.yaml`文件,加入必要的包管理器声明以及任何可能需要用到的第三方库。特别是要确保包含了能够处理跨平台通信和服务访问的相关插件,比如用于网络请求、本地存储等功能模块的支持。 ```yaml dependencies: flutter: sdk: flutter # Add other dependencies here... dev_dependencies: flutter_test: sdk: flutter ``` 同时还需要修改`build.gradle`中的配置以适应鸿蒙环境的要求,具体可以参照文档说明完成相应设置[^1]。 #### 实现页面交互逻辑 编写Dart代码定义UI组件及其行为模式,利用StatefulWidget或Provider等状态管理模式保持界面更新同步。考虑到性能因素,建议尽可能减少不必要的重建次数,并合理规划异步任务调度机制。 ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Harmony & Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), home: Scaffold( appBar: AppBar(title: Text('Home Page')), body: Center(child: Text('Welcome to HarmonyOS with Flutter!')), ), ); } } ``` 以上是一个简单的例子展示如何构建初始视图层次结构;实际应用场景下还需进一步扩展和完善业务流程控制部分。 #### 测试与部署 最后一步是对整个解决方案进行全面测试验证其稳定性和兼容性表现良好之后再考虑正式上线发布事宜。借助模拟器或者真实设备来进行全方位的功能检测是非常重要的环节之一。此外也可以尝试接入一些自动化持续集成/交付(CI/CD)管道提高效率降低人为错误风险。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

3个L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值