Flutter开发者是时候拥抱鸿蒙开发了

silence_xz

已于 2025-03-07 16:14:56 修改

阅读量1.2k

点赞数 26

文章标签： flutter harmonyos 华为

于 2025-03-07 15:59:31 首次发布

本文链接：https://blog.csdn.net/silence_xz/article/details/146093719

版权

Flutter开发者是时候拥抱鸿蒙开发了

安装Flutter For HarmonyOS环境

1、使用 Flutter SDK 3.22.1构建HarmonyOS应用

2、缺少插件？使用鸿蒙for Flutter库

一、创建Flutter for 鸿蒙项目

1.进入项目根目录，如果项目还未创建，则使用 flutter create 命令创建项目。
2.如果项目已经创建，还未添加鸿蒙平台支持，则使用以下命令添加鸿蒙平台支持。

flutter create --platforms ohos .  --org com.lenercom

.指定的是当前目录，org com.lenercom 为组织名称，一般为自已拥有的域名反过来。如果不固定组织名称，则会出现报错：

Ambiguous organization in existing files: {org, com.lenercom}. The --org command line argument must be specified to recreate project.

二、签名

1.在运行项目前，先对项目进行签名，否则在运行过程中会出现这样的错误
请通过DevEco Studio打开ohos工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选Automatically generate signature)

2.用 DevEco 打开上面的 ohos 目录，注意不是项目目录，是项目下面的 ohos 鸿蒙目录，然后根据提示依次打开
File -> Project Structure -> Signing Configs, 点击自动签名即可。

3.签名成功后，文件 ohos/build-profile.json5 会自动更新，里面的字段 signingConfigs 出现相应的签名配置信息。
在这里插入图片描述

三、运行

我们使用flutter run

四、项目目录结构

AppScope
- App.json5 配置信息（https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/app-configuration-file-V5）
- resource 资源信息
  - media
    - 应用图标（规范：https://developer.huawei.com/consumer/cn/doc/design-guides/application-icon-0000001953444009#section634668113212）
entry 核心模块（Harmony工程模块，编译生成一个HAP包）
- main
  - resources 存放应用的资源文件，图片、字体、多媒体文件、布局文件
    - rawfile 存放原始数据
  - module.json5 权限申请（参数：requestPermissions）
  - ets 存放ArkTS源码
    - pages 应用/服务包含的页面
    - entryability 应用/服务入口
    - entrybackupability 应用提供扩展的备份恢复能力
oh_modules 用于存放三方库依赖信息

五、其他

1.应用基础知识

应用名称
entry/src/main/resources/base/element/string.json中的EntryAbility_label的value的值，优先级低于多语言文件的值
备注：如果是修改，有缓存需要重新安装

应用图标
entry/src/main/resources/base/media文件夹中的icon图标或者前景（foreground.png）和背景（background.png）

启动图
module.json5有startWindowIcon和startWindowBackground两个字段，分别对应启动页的图标和背景颜色。

应用包名
AppScope/app.json5文件中的bundleName

2.UI基础知识
2.1 修饰词
@Component 修饰的具有组件化的能力，可以当做单个View，通过实现build方法描述UI.
@Entry 用于修饰单个页面中的入口组件@Component，单个页面中有且只要一个
@State 修饰的状态，类似于Vue中数据绑定，声明式UI的范式，数据改变驱动UI更新
@Builder 构建组件函数
@Provide 定义路由栈Navigation
@Consumer 获取祖代组件中的导航栈
@Link 接收传递的导航栈中的索引

2.2 路由跳转之组件导航
2.2.1 Tabs 分栏组件
关键字：Tabs 分栏组件、TabContent分栏对应的组件、TabsController分栏控制器、tabBar属性自定义（标题、图标、选中/未选中）
具体实现
分栏Tabs包含每个分栏的内容TabContent，可以绑定控制器TabsController来控制分栏的切换，每个分栏TabContent可以自定义设置自己的tabbar。

2.2.2 Navigation 导航组件
关键字：Navigation 导航、NavPathStack导航栈、NavDestination导航目标地(用于定义页面名称与页面内容组件的对应关系）
具体实现
使用导航Navigation时，需要绑定一个导航栈（@Provide NavPathStack),并需要设置导航目标(属性navDestination）
跳转时用@Consumer修饰获取到祖代组件中的导航栈，然后通过导航栈进行路由的前进、回退、路由记录的保存、路由参数的保存与获取。跳转的页面需要内嵌到NavDestination组件中。

2.3 网格Grid
属性rowsTemplate 和columnsTemplate，使用’数字+fr’，表示多少行/列。

2.4 列表List
构造参数space表示item的间距
属性listDirection表示列表的方向,contentStartOffset和contentEndOffset表示内容距离前后的距离

layoutWeight设置权限，在Row中使用；

3.编辑器知识
修改结果时，Ctrl+s 保存后，previewer会自动更新；修改组件属性值自动更新。
Previewer 默认是Page Mode（页面预览模式），可以改成Component模式，可以预览@Preview修饰的组件，进行单独预览

4.资源访问

应用资源
- 应用资源都放在entry/src/resources/目录下，通过$r(“app.type.name”) 其中type是资源类型，name是资源名称
系统资源
- 开发者可以使用系统预定义的资源，使用方式同访问应用资源，通过$r(“sys.type. resource_id”),resource_id代表资源

5.关键字
export ：定义类/函数/变量等导出，以便于其他文件通过import语句使用它们

Blank 填充空白区域

private 私有属性

6.鸿蒙APP开发使用的架构设计

单个模块架构设计：MVVM
MVVM中M，指的是Model，用于存储数据模型；V，指的是View，用于存储UI组件；VM指的是ViewModel用于状态管理，将数据与UI进行绑定，数据发生变化时，直接更新UI。

APP模块整体架构设计：三层架构
在这里插入图片描述

从低到高依次是
common层：公共基础能力集合（工具库、基础配置、UI组件），向上提供依赖

features层：基础特性集合（如相对独立功能的UI和业务逻辑）

Products层：产品定制层（用于不同形态的设备进行功能和特性集成）

7.组件生命周期
在这里插入图片描述

六、flutter 适配鸿蒙版插件

1.创建flutter适配鸿蒙平台插件

flutter create -t plugin --platforms ohos,ios,android sil_wifi_yz_plugin(插件名)

2.在pubspes.yaml文中，新增ohos插件支持。其中的package可以同android的package,
例如：

ohos:
   package: com.example.sil_wifi_yz_plugin
   pluginClass: SilWifiYzPlugin

3.小知识点
3.1 插件中获取当前context，在使用的地方直接使用getContext(this)获取当前的context。