Contents

使用平台视图在 Flutter 应用中托管原生 Android 视图

Contents

混合合成
纹理层（或纹理层混合合成）
Dart 端
- 混合合成
- TextureLayerHybridComposition
平台端
性能

平台视图允许您在 Flutter 应用中嵌入原生视图，以便您可以从 Dart 应用变换、剪辑和不透明度到原生视图。

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

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）中，使用以下说明：

添加以下导入：

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

实现 build() 方法：

dartWidget build(BuildContext context) {
  // 这在平台端用于注册视图。
  const String viewType = '<platform-view-type>';
  // 将参数传递到平台端。
  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();
    },
  );
}

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

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

添加以下导入：

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

实现 build() 方法：

dartWidget build(BuildContext context) {
  // 这在平台端用于注册视图。
  const String viewType = '<platform-view-type>';
  // 将参数传递到平台端。
  final Map<String, dynamic> creationParams = <String, dynamic>{};

  return AndroidView(
    viewType: viewType,
    layoutDirection: TextDirection.ltr,
    creationParams: creationParams,
    creationParamsCodec: const StandardMessageCodec(),
  );
}

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

AndroidView

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

Kotlin
Java

在您的原生代码中，实现以下内容：

扩展 io.flutter.plugin.platform.PlatformView 以提供对 android.view.View 的引用（例如，NativeView.kt）：

kotlinpackage 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)"
    }
}

创建一个工厂类，该类创建前面创建的 NativeView 实例（例如，NativeViewFactory.kt）：

kotlinpackage 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)
    }
}

最后，注册平台视图。您可以在应用程序或插件中执行此操作。

对于应用程序注册，修改应用程序的主活动（例如，MainActivity.kt）：

kotlinpackage 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())
    }
}

对于插件注册，修改插件的主类（例如，PlatformViewPlugin.kt）：

kotlinpackage 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) {}
}

在您的原生代码中，实现以下内容：

扩展 io.flutter.plugin.platform.PlatformView 以提供对 android.view.View 的引用（例如，NativeView.java）：

javapackage 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() {}
}

创建一个工厂类，该类创建前面创建的 NativeView 实例（例如，NativeViewFactory.java）：

javapackage 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);
  }
}

最后，注册平台视图。您可以在应用程序或插件中执行此操作。

对于应用程序注册，修改应用程序的主活动（例如，MainActivity.java）：

javapackage 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());
    }
}

对于插件注册，修改插件的主文件（例如，PlatformViewPlugin.java）：

javapackage 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 文档：

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

kotlinandroid {
    defaultConfig {
        minSdk = 19 // 如果使用混合合成
        minSdk = 20 // 如果使用虚拟显示。
    }
}

对于 Flutter 来说，处理 SurfaceView 存在问题，应尽可能避免。

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

现有平台视图问题

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

例如，在典型的 Flutter 应用中，Flutter UI 在专用光栅线程上进行合成。这使得 Flutter 应用能够快速运行，因为主平台线程很少被阻塞。

虽然平台视图使用混合合成进行渲染，但 Flutter UI 是从平台线程合成的，这会与其他任务（例如处理操作系统或插件消息）竞争。

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

另一方面，虚拟显示使原生视图的每个像素都流经额外的中间图形缓冲区，这会影响图形内存和绘图性能。

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

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

更多信息，请参见：

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。查看源代码或报告问题。

混合合成

纹理层（或纹理层混合合成）

Dart 端

混合合成

TextureLayerHybridComposition

平台端

Surface 视图

手动视图失效

问题

性能