Flutter HarmonyOS集成插件harmonyos的使用

Flutter HarmonyOS集成插件harmonyos的使用

关于这个项目

一个非官方的插件,旨在将华为HarmonyOS/EMUI 12/OpenAtom基金会OpenHarmony的界面带到Flutter应用中。

通过这个插件,你可以在单个应用程序中体验两个世界的最佳功能!

我们的目标是制作一个像素完美的华为ArkUI库的克隆,并支持其组件。

如果你喜欢这个项目,请考虑贡献以获得更多功能,并在发现错误或有功能请求时留下问题。

当前状态

已经实现了以下组件:

HarmonyOS UI 组件 Material UI 组件
[HMAbility] [Scaffold]
[HMTextButton] [TextButton]
[HMElevatedButton] [ElevatedButton]
[HMIconButton] [IconButton]
[HMFloatingActionButton] [FloatingActionButton]
[showHMDialog] [showDialog] (定制较少)
[HMButton] ?
[HMTextInput] [TextField]

示例代码

以下是使用该插件的一个简单示例:

import 'package:flutter/material.dart';
import 'package:harmonyos/harmonyos.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return HMAbility(
      // 主页面内容
      body: Column(children: [
        // 普通按钮
        HMButton(onPressed: () {}, child: const Text("Button")),
        // 危险按钮
        HMButton(
            onPressed: () {}, isDanger: true, child: const Text("Danger Button")),
        // 浮动按钮
        HMElevatedButton(onPressed: () {}, child: const Text("Elevated Button")),
        // 文本按钮
        HMTextButton(onPressed: () {}, child: const Text("Text Button")),
        // 图标按钮
        HMIconButton(onPressed: () {}, icon: const Icon(Icons.abc)),
        // 文本输入框
        const HMTextInput(placeholder: "Text Input", prefixIcon: Icon(Icons.abc), grey: true),
        // 显示对话框按钮
        HMElevatedButton(
            onPressed: () {
              showHMDialog(
                  false,
                  context,
                  [
                    HMTextButton(onPressed: () {}, child: const Text("123")),
                    HMTextButton(onPressed: () {}, child: const Text("123"))
                  ],
                  "Test123",
                  const Text("1234"),
                  true);
            },
            child: const Text("Show Dialog"))
      ]),
      // 页面标题
      title: "HarmonyOS UI Library Example",
      // 页面操作按钮
      actions:[
        HMIconButton(onPressed: (){}, icon: const Icon(Icons.more_vert_rounded,color: Colors.black,))
      ],
      // 浮动按钮
      floatingActionButton: HMFloatingActionButton(
        child: const Icon(
          Icons.add_rounded,
          color: Colors.white,
        ),
        onPress: () {},
      ),
    );
  }
}

更多关于Flutter HarmonyOS集成插件harmonyos的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter HarmonyOS集成插件harmonyos的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中集成HarmonyOS插件harmonyos可以使得你的Flutter应用能够在HarmonyOS设备上运行。以下是一个基本的代码案例,展示了如何在Flutter项目中集成和使用HarmonyOS插件。

1. 配置pubspec.yaml

首先,你需要在pubspec.yaml文件中添加harmonyos插件的依赖。注意,由于HarmonyOS平台相对特殊,具体的插件名称和版本可能会根据HarmonyOS SDK的更新而变化。以下是一个示例依赖配置:

dependencies:
  flutter:
    sdk: flutter
  harmonyos: ^x.y.z  # 替换为实际的插件版本

请确保你使用的是最新的、与你的HarmonyOS SDK版本兼容的插件版本。

2. 配置build.gradle(如果需要)

在某些情况下,你可能需要在Android的build.gradle文件中添加对HarmonyOS的支持。不过,这通常是由harmonyos插件自动处理的。如果你遇到编译问题,可能需要手动调整。

3. 编写Flutter代码

以下是一个简单的Flutter应用示例,展示了如何使用harmonyos插件的一些基本功能(具体功能取决于插件提供的API)。

import 'package:flutter/material.dart';
import 'package:harmonyos/harmonyos.dart';  // 假设插件提供了这个包

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter HarmonyOS Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String platformVersion = 'Unknown';

  @override
  void initState() {
    super.initState();
    _initPlatformState();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> _initPlatformState() async {
    String version;
    // Platform messages may fail, so we use a try-catch block.
    try {
      if (kIsHarmonyOS) {
        // 使用HarmonyOS插件获取平台信息
        version = await HarmonyOS.platformVersion;
      } else {
        version = 'Not running on HarmonyOS';
      }
    } on PlatformException {
      version = 'Failed to get platform version.';
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      platformVersion = version;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter HarmonyOS Demo'),
      ),
      body: Center(
        child: Text('Running on: $platformVersion\n'),
      ),
    );
  }
}

4. 条件编译

由于Flutter代码需要同时支持多个平台,你可以使用kIsHarmonyOS常量(假设插件或Flutter SDK提供了这个常量)来进行条件编译。在上面的代码中,我们检查了这个常量来决定是否调用HarmonyOS特定的API。

5. 运行应用

确保你的开发环境已经配置好HarmonyOS SDK,并且你的设备或模拟器已经设置为HarmonyOS。然后,你可以使用Flutter的常规命令来运行你的应用:

flutter run

注意

  • 具体的harmonyos插件API可能会有所不同,你需要参考插件的官方文档来了解如何正确使用它。
  • 由于HarmonyOS是一个相对较新的平台,Flutter对其的支持还在不断完善中,因此你可能需要定期更新你的Flutter SDK和插件。
  • 如果你遇到任何问题,查阅官方文档、社区论坛或提交issue给插件的维护者都是很好的解决途径。
回到顶部