在 Flutter 应用中使用平台视图嵌入原生 Android 视图

平台视图允许你在 Flutter 应用中嵌入原生视图，这样你就可以从 Dart 应用转换、裁剪和调整原生视图的不透明度。

这允许您，例如，直接在 Flutter 应用中使用 Android SDK 中的原生 Google Maps。

Android 上的平台视图有两种实现。 它们在性能和保真度方面都有权衡。 平台视图需要 Android API 23+。

平台视图以其正常方式渲染。 Flutter 内容渲染到纹理中。 SurfaceFlinger 组合 Flutter 内容和平台视图。

• + 最佳的 Android 视图性能和保真度。
• - Flutter 性能会下降。
• - 应用的 FPS 会降低。
• - 应用于平台视图时，某些可以应用于 Flutter 部件的变换将不起作用。

平台视图渲染到纹理中。 Flutter 通过纹理绘制平台视图。 Flutter 内容直接渲染到 Surface 中。

• + Android 视图的良好性能
• + 最佳的 Flutter 渲染性能。
• + 所有变换都能正确工作。
• - 快速滚动（例如，网页视图）会卡顿
• - 在这种模式下，SurfaceView 会出现问题，将被移动到虚拟显示器中（破坏辅助功能）
• - 除非 Flutter 渲染到 TextureView 中，否则文本放大镜将无法工作。

要在 Android 上创建平台视图，请执行以下步骤

在 Dart 侧，创建一个 Widget 并添加以下构建实现之一。

在您的 Dart 文件中，例如 native_view_example.dart，请使用以下说明

1. 添加以下导入：

   dart

   import 'package:flutter/foundation.dart';
   import 'package:flutter/gestures.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter/rendering.dart';
   import 'package:flutter/services.dart';
   

   content_copy

2. 实现 build() 方法

   dart

   Widget build(BuildContext context) {
     // This is used in the platform side to register the view.
     const String viewType = '<platform-view-type>';
     // Pass parameters to the platform side.
     const Map<String, dynamic> creationParams = <String, dynamic>{};
   ​
     return PlatformViewLink(
       viewType: viewType,
       surfaceFactory: (context, controller) {
         return AndroidViewSurface(
           controller: controller as AndroidViewController,
           gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
           hitTestBehavior: PlatformViewHitTestBehavior.opaque,
         );
       },
       onCreatePlatformView: (params) {
         return PlatformViewsService.initSurfaceAndroidView(
             id: params.id,
             viewType: viewType,
             layoutDirection: TextDirection.ltr,
             creationParams: creationParams,
             creationParamsCodec: const StandardMessageCodec(),
             onFocus: () {
               params.onFocusChanged(true);
             },
           )
           ..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
           ..create();
       },
     );
   }
   

   content_copy

有关更多信息，请参阅以下 API 文档

• PlatformViewLink
• AndroidViewSurface
• PlatformViewsService

在您的 Dart 文件中，例如 native_view_example.dart，请使用以下说明

1. 添加以下导入：

   dart

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

   content_copy

2. 实现 build() 方法

   dart

   Widget build(BuildContext context) {
     // This is used in the platform side to register the view.
     const String viewType = '<platform-view-type>';
     // Pass parameters to the platform side.
     final Map<String, dynamic> creationParams = <String, dynamic>{};
   ​
     return AndroidView(
       viewType: viewType,
       layoutDirection: TextDirection.ltr,
       creationParams: creationParams,
       creationParamsCodec: const StandardMessageCodec(),
     );
   }
   

   content_copy

有关更多信息，请参阅以下 API 文档

• AndroidView

在平台侧，在 Kotlin 或 Java 中使用标准的 io.flutter.plugin.platform 包

package dev.flutter.example
​
import android.content.Context
import android.graphics.Color
import android.view.View
import android.widget.TextView
import io.flutter.plugin.platform.PlatformView
​
internal class NativeView(context: Context, id: Int, creationParams: Map<String?, Any?>?) : PlatformView {
    private val textView: TextView
​
    override fun getView(): View {
        return textView
    }
​
    override fun dispose() {}
​
    init {
        textView = TextView(context)
        textView.textSize = 72f
        textView.setBackgroundColor(Color.rgb(255, 255, 255))
        textView.text = "Rendered on a native Android view (id: $id)"
    }
}

package dev.flutter.example
​
import android.content.Context
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory
​
class NativeViewFactory : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
        val creationParams = args as Map<String?, Any?>?
        return NativeView(context, viewId, creationParams)
    }
}

package dev.flutter.example
​
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
​
class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine
                .platformViewsController
                .registry
                .registerViewFactory("<platform-view-type>",
                                      NativeViewFactory())
    }
}

package dev.flutter.plugin.example
​
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.embedding.engine.plugins.FlutterPlugin.FlutterPluginBinding
​
class PlatformViewPlugin : FlutterPlugin {
    override fun onAttachedToEngine(binding: FlutterPluginBinding) {
        binding
                .platformViewRegistry
                .registerViewFactory("<platform-view-type>", NativeViewFactory())
    }
​
    override fun onDetachedFromEngine(binding: FlutterPluginBinding) {}
}

package dev.flutter.example;
​
import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import io.flutter.plugin.platform.PlatformView;
import java.util.Map;
​
class NativeView implements PlatformView {
   @NonNull private final TextView textView;
​
    NativeView(@NonNull Context context, int id, @Nullable Map<String, Object> creationParams) {
        textView = new TextView(context);
        textView.setTextSize(72);
        textView.setBackgroundColor(Color.rgb(255, 255, 255));
        textView.setText("Rendered on a native Android view (id: " + id + ")");
    }
​
    @NonNull
    @Override
    public View getView() {
        return textView;
    }
​
    @Override
    public void dispose() {}
}

package dev.flutter.example;
​
import android.content.Context;
import androidx.annotation.Nullable;
import androidx.annotation.NonNull;
import io.flutter.plugin.common.StandardMessageCodec;
import io.flutter.plugin.platform.PlatformView;
import io.flutter.plugin.platform.PlatformViewFactory;
import java.util.Map;
​
class NativeViewFactory extends PlatformViewFactory {
​
  NativeViewFactory() {
    super(StandardMessageCodec.INSTANCE);
  }
​
  @NonNull
  @Override
  public PlatformView create(@NonNull Context context, int id, @Nullable Object args) {
    final Map<String, Object> creationParams = (Map<String, Object>) args;
    return new NativeView(context, id, creationParams);
  }
}

package dev.flutter.example;
​
import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
​
public class MainActivity extends FlutterActivity {
    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        flutterEngine
            .getPlatformViewsController()
            .getRegistry()
            .registerViewFactory("<platform-view-type>", new NativeViewFactory());
    }
}

package dev.flutter.plugin.example;
​
import androidx.annotation.NonNull;
import io.flutter.embedding.engine.plugins.FlutterPlugin;
​
public class PlatformViewPlugin implements FlutterPlugin {
  @Override
  public void onAttachedToEngine(@NonNull FlutterPluginBinding binding) {
    binding
        .getPlatformViewRegistry()
        .registerViewFactory("<platform-view-type>", new NativeViewFactory());
  }
​
  @Override
  public void onDetachedFromEngine(@NonNull FlutterPluginBinding binding) {}
}

有关更多信息，请参阅以下 API 文档

• FlutterPlugin
• PlatformViewRegistry
• PlatformViewFactory
• PlatformView

最后，修改您的 build.gradle 文件以需要其中一个最低 Android SDK 版本

android {
    defaultConfig {
        minSdk = 19 // if using hybrid composition
        minSdk = 20 // if using virtual display.
    }
}

处理 SurfaceView 对于 Flutter 来说很棘手，应尽可能避免。

某些 Android 视图在内容更改时不会使自身失效。 一些示例视图包括 SurfaceView 和 SurfaceTexture。 当您的平台视图包含这些视图时，您需要在绘制后手动使视图失效（或者更具体地说：在交换链翻转后）。 手动视图失效是通过在 View 或其父 View 之一上调用 invalidate 来完成的。

现有的平台视图问题

Flutter 中的平台视图会带来性能上的权衡。

例如，在典型的 Flutter 应用中，Flutter UI 在一个专用的栅格线程上组合。 这使得 Flutter 应用速度很快，因为主平台线程很少被阻塞。

当平台视图使用混合组合渲染时，Flutter UI 会从平台线程组合，这会与其他任务（例如处理操作系统或插件消息）竞争。

在 Android 10 之前，混合组合会将每个 Flutter 帧从图形内存复制到主内存，然后再复制回 GPU 纹理。 由于此复制发生在每个帧上，因此整个 Flutter UI 的性能可能会受到影响。 在 Android 10 或更高版本中，图形内存仅复制一次。

另一方面，虚拟显示器会使原生视图的每个像素通过额外的中间图形缓冲区流动，这会消耗图形内存和绘制性能。

对于复杂的情况，可以使用一些技术来缓解这些问题。

例如，您可以在 Dart 中进行动画时使用占位符纹理。 换句话说，如果平台视图渲染时动画速度较慢，请考虑拍摄原生视图的屏幕截图并将其渲染为纹理。

有关更多信息，请参阅

• TextureLayer
• TextureRegistry
• FlutterTextureRegistry
• FlutterImageView