Flutter平台视图集成插件simple_platform_view的使用

在Flutter中，平台视图（Platform Views）允许你嵌入原生的Android和iOS视图到你的Flutter应用中。simple_platform_view 是一个示例插件，用于展示如何在Flutter中集成平台视图。虽然 simple_platform_view 本身可能不是一个真实存在的官方插件，但我们可以基于这个概念编写一个类似的插件来演示其使用。

以下是如何创建一个简单的Flutter插件来集成平台视图的基本步骤，以及相应的代码案例。

1. 创建Flutter插件

首先，你需要创建一个Flutter插件项目。你可以使用以下命令：

flutter create --org com.example --template=plugin simple_platform_view

2. 配置Android平台视图

在 android/src/main/java/com/example/simple_platform_view/SimplePlatformViewFactory.java 中实现一个 PlatformViewFactory：

package com.example.simple_platform_view;

import android.content.Context;
import android.view.View;
import android.widget.TextView;

import io.flutter.embedding.engine.plugins.FlutterPlugin;
import io.flutter.embedding.engine.plugins.activity.ActivityAware;
import io.flutter.embedding.engine.plugins.activity.ActivityPluginBinding;
import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.platform.PlatformView;
import io.flutter.plugin.platform.PlatformViewFactory;

public class SimplePlatformViewFactory extends PlatformViewFactory implements FlutterPlugin, ActivityAware {
    private ActivityPluginBinding activityBinding;

    @Override
    public PlatformView create(Context context, int id, Object args) {
        return new SimplePlatformView(context, activityBinding.getActivity());
    }

    @Override
    public void onAttachedToEngine(FlutterPluginBinding flutterPluginBinding) {
        // No-op
    }

    @Override
    public void onDetachedFromEngine(FlutterPluginBinding flutterPluginBinding) {
        // No-op
    }

    @Override
    public void onAttachedToActivity(ActivityPluginBinding binding) {
        activityBinding = binding;
    }

    @Override
    public void onDetachedFromActivityForConfigChanges() {
        activityBinding = null;
    }

    @Override
    public void onReattachedToActivityForConfigChanges(ActivityPluginBinding binding) {
        activityBinding = binding;
    }

    @Override
    public void onDetachedFromActivity() {
        activityBinding = null;
    }

    private static class SimplePlatformView implements PlatformView {
        private final View nativeView;

        SimplePlatformView(Context context, android.app.Activity activity) {
            nativeView = new TextView(context);
            ((TextView) nativeView).setText("Hello from Android Native View!");
        }

        @Override
        public View getView() {
            return nativeView;
        }

        @Override
        public void dispose() {
            // Clean up resources here if needed
        }
    }
}

3. 配置iOS平台视图

在 ios/Classes/SimplePlatformViewFactory.swift 中实现一个 FlutterPlatformViewFactory：

import UIKit
import Flutter

public class SimplePlatformViewFactory: NSObject, FlutterPlatformViewFactory {
    public func create(withFrame frame: CGRect,
                       viewIdentifier viewId: Int64,
                       arguments args: Any?) -> FlutterPlatformView {
        return SimplePlatformView(frame: frame, viewId: viewId, arguments: args)
    }
}

class SimplePlatformView: NSObject, FlutterPlatformView {
    private let nativeView: UIView

    init(frame: CGRect, viewId: Int64, arguments: Any?) {
        self.nativeView = UIView(frame: frame)
        let label = UILabel(frame: frame)
        label.text = "Hello from iOS Native View!"
        label.textAlignment = .center
        self.nativeView.addSubview(label)
        
        super.init()
    }

    public func view() -> UIView {
        return nativeView
    }
}

4. 注册插件

在 android/src/main/kotlin/com/example/simple_platform_view/SimplePlatformViewPlugin.kt 中注册工厂：

package com.example.simple_platform_view

import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.embedding.engine.plugins.activity.ActivityAware
import io.flutter.embedding.engine.plugins.activity.ActivityPluginBinding
import io.flutter.plugin.platform.PlatformViewRegistry

class SimplePlatformViewPlugin: FlutterPlugin, ActivityAware {
  override fun onAttachedToEngine(binding: FlutterPluginBinding) {
    val registry = binding.platformViewRegistry
    with(registry) {
      registerViewFactory("simple_platform_view", SimplePlatformViewFactory())
    }
  }

  override fun onDetachedFromEngine(binding: FlutterPluginBinding) {
    // No-op
  }

  override fun onAttachedToActivity(binding: ActivityPluginBinding) {
    // No-op
  }

  override fun onDetachedFromActivityForConfigChanges() {
    // No-op
  }

  override fun onReattachedToActivityForConfigChanges(binding: ActivityPluginBinding) {
    // No-op
  }

  override fun onDetachedFromActivity() {
    // No-op
  }
}

在 ios/Classes/SimplePlatformViewPlugin.swift 中注册工厂：

import Flutter

public class SimplePlatformViewPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "simple_platform_view", binaryMessenger: registrar.messenger())
    let factory = SimplePlatformViewFactory()
    
    registrar.register(factory, withId: "simple_platform_view")
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    // No-op
  }
}

5. 在Flutter中使用平台视图

在你的Flutter项目中，你可以使用 ui.platformViewRegistry.registerViewFactory 来注册平台视图，并在布局中使用它：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:simple_platform_view/simple_platform_view.dart'; // 假设你已经将插件添加到pubspec.yaml中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Platform View Example'),
        ),
        body: Center(
          child: PlatformView(
            viewType: 'simple_platform_view',
          ),
        ),
      ),
    );
  }
}

请注意，上述代码是示例性质的，并且假设你已经在 pubspec.yaml 中添加了你的插件依赖。实际使用中，你需要根据具体需求调整代码。