一、插件介绍

platformchannel_demo是一个专门演示Flutter Platform Channel在OpenHarmony平台上应用的示例项目。该项目全面展示了Flutter与OpenHarmony原生系统之间的通信能力，包括系统UI控制、设备方向调整、剪贴板操作、触觉反馈等核心功能。

主要功能特性

• 系统UI模式控制：支持leanBack、immersive、immersiveSticky、edgeToEdge等多种系统UI显示模式
• 状态栏与导航栏定制：可自定义状态栏和导航栏的颜色、样式
• 设备方向管理：支持设置屏幕旋转方向（横屏左/右、竖屏上/下）
• 剪贴板操作：实现文本内容的复制与粘贴功能
• 触觉反馈：支持设备振动功能
• 应用切换器配置：可设置应用在任务管理器中的显示标签和颜色
• 系统UI变化监听：实时监听系统UI状态变化

技术亮点

• 基于Flutter官方platform channels实现跨平台通信
• 适配OpenHarmony API 9+平台
• 提供完整的示例代码，包含所有功能的演示界面
• 代码结构清晰，便于学习和扩展

二、环境配置

系统要求

• OpenHarmony SDK API 9+
• Flutter SDK 3.0+
• DevEco Studio 3.0+
• Dart SDK 2.19.6+

项目依赖配置

在Flutter项目的pubspec.yaml文件中，添加以下依赖：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

  # platformchannel_demo依赖（通过AtomGit引入）
  platformchannel_demo:
    git:
      url: "https://atomgit.com/openharmony-tpc/flutter_packages.git"
      path: "ohos/platformchannel_demo"

项目初始化

1. 创建Flutter项目：

flutter create my_platform_channel_app
cd my_platform_channel_app

2. 配置OpenHarmony环境：

flutter run --platforms=ohos

3. 运行项目：

flutter run

三、API使用示例

1. 系统UI模式控制

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

class SystemUIModeDemo extends StatelessWidget {
  const SystemUIModeDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 沉浸式模式
        ElevatedButton(
          child: const Text('SystemUiMode.immersive'),
          onPressed: () {
            SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
          },
        ),

        // 粘性沉浸式模式
        ElevatedButton(
          child: const Text('SystemUiMode.immersiveSticky'),
          onPressed: () {
            SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
          },
        ),

        // 边缘到边缘模式
        ElevatedButton(
          child: const Text('SystemUiMode.edgeToEdge'),
          onPressed: () {
            SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
          },
        ),
      ],
    );
  }
}

2. 状态栏与导航栏样式定制

ElevatedButton(
  child: const Text('自定义状态栏和导航栏颜色'),
  onPressed: () {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.cyan,        // 状态栏颜色
      systemNavigationBarColor: Colors.black,  // 导航栏颜色
    ));
  },
),

3. 设备方向设置

// 设置为横屏左侧
ElevatedButton(
  child: const Text('横屏左侧'),
  onPressed: () {
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.landscapeLeft]);
  },
),

// 设置为竖屏向上
ElevatedButton(
  child: const Text('竖屏向上'),
  onPressed: () {
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitUp]);
  },
),

4. 剪贴板操作

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

class ClipboardDemo extends StatefulWidget {
  const ClipboardDemo({super.key});

  @override
  _ClipboardDemoState createState() => _ClipboardDemoState();
}

class _ClipboardDemoState extends State<ClipboardDemo> {
  String _clipboardContent = '当前剪贴板为空';
  final TextEditingController _controller = TextEditingController();

  // 复制文本到剪贴板
  Future<void> _copyToClipboard(String text) async {
    await Clipboard.setData(ClipboardData(text: text));
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('已复制到剪贴板')),
    );
  }

  // 从剪贴板获取文本
  Future<void> _pasteFromClipboard() async {
    ClipboardData? data = await Clipboard.getData(Clipboard.kTextPlain);
    setState(() {
      _clipboardContent = data?.text ?? '剪贴板为空';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
          decoration: const InputDecoration(
            labelText: '输入要复制的内容',
          ),
        ),
        ElevatedButton(
          onPressed: () => _copyToClipboard(_controller.text),
          child: const Text('复制'),
        ),
        ElevatedButton(
          onPressed: _pasteFromClipboard,
          child: const Text('粘贴'),
        ),
        Text('剪贴板内容: $_clipboardContent'),
      ],
    );
  }
}

5. 触觉反馈

ElevatedButton(
  child: const Text('触发振动'),
  onPressed: () {
    HapticFeedback.vibrate();
  },
),

6. 应用切换器配置

ElevatedButton(
  child: const Text('设置应用切换器信息'),
  onPressed: () {
    SystemChrome.setApplicationSwitcherDescription(
        ApplicationSwitcherDescription(
          label: '我的Flutter应用', // 任务管理器中的标签
          primaryColor: 0xFF0000FF.toInt() // 应用的主要颜色
        ));
  },
),

7. 系统UI变化监听

ElevatedButton(
  child: const Text('监听系统UI变化'),
  onPressed: () {
    SystemChrome.setSystemUIChangeCallback(
        (systemOverlaysAreVisible) async {
      if (systemOverlaysAreVisible) {
        print('系统UI可见');
        // 1秒后恢复系统UI
        await Future.delayed(const Duration(seconds: 1));
        SystemChrome.restoreSystemUIOverlays();
      }
    });
  },
),

四、完整示例应用

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Platform Channel Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _currentState = '准备就绪';

  void updateState(String state) {
    setState(() {
      _currentState = state;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Platform Channel Demo')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('当前状态: $_currentState'),
            ),

            // 系统UI模式
            const SizedBox(height: 20),
            const Text('系统UI模式控制', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            ElevatedButton(
              child: const Text('SystemUiMode.leanBack'),
              onPressed: () {
                SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
                updateState('leanBack模式');
              },
            ),

            // 其他功能按钮...

            // 剪贴板功能
            const SizedBox(height: 20),
            ElevatedButton(
              child: const Text('打开剪贴板功能'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ClipboardDemo()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

五、常见问题与解决方案

1. 系统UI模式设置不生效

问题：调用SystemChrome.setEnabledSystemUIMode后，系统UI没有变化。

解决方案：确保在WidgetsFlutterBinding.ensureInitialized()之后调用该方法，并且应用具有相应的权限。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 在这里设置初始UI模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const MyApp());
}

2. 剪贴板功能无法使用

问题：复制或粘贴操作没有反应。

解决方案：检查应用是否具有剪贴板访问权限，在OpenHarmony的module.json5文件中添加以下权限：

"requestPermissions": [
  {
    "name": "ohos.permission.READ_CLIPBOARD",
    "reason": "需要访问剪贴板读取内容"
  },
  {
    "name": "ohos.permission.WRITE_CLIPBOARD",
    "reason": "需要访问剪贴板写入内容"
  }
]

3. 触觉反馈没有效果

问题：调用HapticFeedback.vibrate()后设备没有振动。

解决方案：检查设备是否支持振动功能，以及应用是否具有振动权限：

"requestPermissions": [
  {
    "name": "ohos.permission.VIBRATE",
    "reason": "需要使用振动功能"
  }
]

六、总结

platformchannel_demo是一个非常实用的Flutter跨平台示例项目，全面展示了Flutter与OpenHarmony原生系统之间的通信能力。通过这个项目，开发者可以学习如何使用Flutter官方提供的platform channelsAPI来控制OpenHarmony设备的各种系统功能。

该项目的主要价值在于：

1. 全面性：涵盖了系统UI控制、设备方向、剪贴板、触觉反馈等多种常用功能
2. 易用性：提供了完整的示例代码，开发者可以直接参考和使用
3. 可扩展性：代码结构清晰，便于在此基础上进行二次开发
4. 兼容性：已适配OpenHarmony API 9+平台，确保在主流鸿蒙设备上的稳定运行

通过学习和使用platformchannel_demo，开发者可以快速掌握Flutter在OpenHarmony平台上的系统级功能开发技巧，为构建更加丰富和强大的跨平台应用打下坚实基础。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net