Platform Component Demo 鸿蒙使用指南

Platform Component Demo是一个Flutter示例包，演示如何集成HarmonyOS原生组件到Flutter应用中。通过Platform Views技术，支持WebView（网页加载、导航控制、JavaScript执行等）和多种文本组件（Text、TextInput等），并实现Flutter与原生组件的双向通信。安装需通过Git依赖配置，使用MethodChannel进行组件控

ntfy456

604人浏览 · 2025-12-20 16:43:45

ntfy456 · 2025-12-20 16:43:45 发布

插件介绍

Platform Component Demo是一个Flutter示例包，演示了如何在Flutter应用中集成HarmonyOS平台组件。该包通过Platform Views技术，允许Flutter应用直接使用HarmonyOS原生组件，实现更丰富的UI和功能体验。

主要功能和特性：

WebView组件：支持加载网页、导航控制、JavaScript执行、图片加载控制等功能
文本相关组件：支持Text、TextInput、TextArea、Span、Search、RichText等多种文本处理组件
双向通信：Flutter与HarmonyOS原生组件之间的无缝数据交互
丰富的配置选项：支持深色模式、字体大小、缩放比例等自定义设置

通过这个示例包，开发者可以学习如何将HarmonyOS原生组件集成到Flutter应用中，实现跨平台开发与原生功能的完美结合。

安装与配置

添加Git依赖

由于这是自定义修改版本，需要通过Git形式引入。在Flutter项目的pubspec.yaml文件中添加以下依赖配置：

dependencies:
  platform_component_demo:
    git:
      url: "https://atomgit.com/"
      path: "packages/platform_component_demo/platform_component_demo"

项目配置

在HarmonyOS侧，需要确保已正确配置平台组件的实现代码。对于WebView和文本相关组件，需要在EntryAbility或相关Service中注册对应的平台视图。

API使用指南

1. WebView组件

WebView组件允许Flutter应用加载和显示网页内容，并提供丰富的控制功能。

示例：基本WebView使用

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

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

  @override
  State<CustomWebView> createState() => _CustomWebViewState();
}

class _CustomWebViewState extends State<CustomWebView> {
  late MethodChannel _channel;
  String inputValue = '';

  @override
  void initState() {
    super.initState();
    // 初始化MethodChannel，用于与原生组件通信
    _channel = const MethodChannel('com.example.platformView.channel/web');

    // 设置方法调用处理器，接收来自原生组件的消息
    _channel.setMethodCallHandler((call) async {
      switch (call.method) {
        case 'getMessageFromOhosView':
          final result = call.arguments as String;
          // 处理来自原生组件的消息
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('WebView Demo')),
      body: Column(
        children: [
          // 显示HarmonyOS原生WebView组件
          Container(
            color: Colors.blueAccent.withAlpha(60),
            width: 400,
            height: 400,
            child: const OhosView(viewType: 'com.example.platformView/web'),
          ),
          // WebView控制界面
          Column(
            children: [
              TextField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'url'
                ),
                onChanged: (value) => inputValue = value,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () async {
                      // 设置WebView加载的URL
                      await _channel.invokeMethod('changeUrl', inputValue);
                    },
                    child: const Text('设置Url')
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      // 刷新WebView
                      await _channel.invokeMethod('refresh', inputValue);
                    },
                    child: const Text('刷新')
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      // WebView后退
                      await _channel.invokeMethod('baclward', inputValue);
                    },
                    child: const Text('后退')
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      // WebView前进
                      await _channel.invokeMethod('forward', inputValue);
                    },
                    child: const Text('前进')
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

WebView配置选项

WebView组件支持多种配置选项，可通过MethodChannel进行设置：

// 控制是否允许加载网络图片
await _channel.invokeMethod('onlineImageAccess', true);

// 控制是否自动加载图片
await _channel.invokeMethod('imageAccess', true);

// 控制是否允许执行JavaScript
await _channel.invokeMethod('javaScriptAccess', true);

// 控制是否阻止网络资源加载
await _channel.invokeMethod('blockNetwork', false);

// 控制是否支持手势缩放
await _channel.invokeMethod('zoomAccess', true);

2. 文本相关组件

Platform Component Demo支持多种文本相关的HarmonyOS平台组件，包括Text、TextInput、TextArea、Span、Search和RichText。

示例：文本组件使用

import 'package:flutter/material.dart';

class ViewPage extends StatefulWidget {
  const ViewPage({Key? key, required this.viewName}) : super(key: key);
  final String viewName;

  @override
  State<ViewPage> createState() => _ViewPageState();
}

class _ViewPageState extends State<ViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.viewName)),
      body: Column(
        children: [
          // 显示指定类型的HarmonyOS原生文本组件
          Container(
            color: Colors.blueAccent.withAlpha(60),
            width: 400,
            height: 400,
            child: OhosView(
              viewType: 'com.example.platformview/${widget.viewName}'
            ),
          ),
          const Text('Flutter Text'),
        ],
      ),
    );
  }
}

支持的文本组件类型

text: 基础文本显示组件
textInput: 文本输入组件
textArea: 多行文本输入组件
span: 文本片段组件，用于富文本显示
search: 搜索输入组件
richText: 富文本显示组件

3. 路由配置

可以通过路由配置，方便地在不同平台组件之间切换：

MaterialApp(
  title: 'PlatformView Demo',
  theme: ThemeData(primarySwatch: Colors.blue),
  home: const HomePage(),
  routes: <String, WidgetBuilder>{
    '/web': (BuildContext context) => const CustomWebView(),
    '/text': (BuildContext context) => const ViewPage(viewName: 'text'),
    '/textInput': (BuildContext context) => const ViewPage(viewName: 'textInput'),
    '/textArea': (BuildContext context) => const ViewPage(viewName: 'textArea'),
    '/span': (BuildContext context) => const ViewPage(viewName: 'span'),
    '/search': (BuildContext context) => const ViewPage(viewName: 'search'),
    '/richText': (BuildContext context) => const ViewPage(viewName: 'richText'),
  },
);

API参考

WebView方法通道

方法名	参数类型	描述
changeUrl	String	设置WebView要加载的URL
refresh	无	刷新当前网页
baclward	无	后退到上一页
forward	无	前进到下一页
stop	无	停止当前加载
onlineImageAccess	bool	允许/禁止从网络加载图片资源
imageAccess	bool	允许/禁止自动加载图片资源
javaScriptAccess	bool	允许/禁止执行JavaScript脚本
blockNetwork	bool	允许/禁止从网络加载资源
zoomAccess	bool	允许/禁止手势缩放

WebView配置参数

参数名	类型	默认值	描述
defaultFontSize	int	16	默认字体大小
darkMode	int	2	深色模式（0: 关闭, 1: 开启, 2: 跟随系统）
initialScale	int	100	初始缩放比例

错误处理

在使用平台组件时，应始终处理可能的PlatformException：

try {
  // 平台组件调用
  await _channel.invokeMethod('changeUrl', inputValue);
} catch (error) {
  if (error is PlatformException) {
    print('Error Code: ${error.code}');
    print('Error Message: ${error.message}');
    print('Error Details: ${error.details}');
  }
}