科普文章：Flutter PlatformView 和 AndroidView

引言

在移动应用开发中，有时候需要在应用中嵌入原生视图或功能，例如在 Flutter 中嵌入 Android 或 iOS 原生视图。Flutter 提供了 PlatformView 和 AndroidView 来实现这一功能，让开发者能够轻松在 Flutter 应用中集成原生视图。

PlatformView 和 AndroidView 的关系

PlatformView 是 Flutter 提供的一个抽象类，它用于在 Flutter 中显示原生视图。而 AndroidView 则是 PlatformView 的一个具体实现，用于在 Flutter 中显示 Android 视图。

下面我们通过一个简单的示例来说明如何使用 AndroidView 将一个 Android 原生视图嵌入到 Flutter 应用中。

示例代码

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

dependencies:
  flutter:
    sdk: flutter
  android_view:
    git:
      url:

然后，在 Flutter 页面中引入 AndroidView：

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

class AndroidViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AndroidView Example'),
      ),
      body: Center(
        child: AndroidView(
          viewType: 'com.example/native_view', // Android 原生视图的标识符
        ),
      ),
    );
  }
}

接下来，在 Android 项目中创建一个 Android 原生视图，例如一个简单的 TextView：

package com.example.myapp;

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

import io.flutter.plugin.platform.PlatformView;

public class NativeView implements PlatformView {
    private final TextView textView;

    NativeView(Context context) {
        textView = new TextView(context);
        textView.setText("Hello from AndroidView!");
    }

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

    @Override
    public void dispose() {
        // Cleanup code
    }
}

在 Android 项目的 AndroidManifest.xml 中注册这个 PlatformView：

<activity android:name=".MainActivity">
  ...
</activity>

<meta-data
    android:name="io.flutter.embedding.android.NormalTheme"
    android:resource="@style/NormalTheme"
    />

<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background"
    />

<meta-data
    android:name="io.flutter.embedding.android.ViewFactory"
    android:value="android_view"/>

最后，在 Flutter 项目中的 main.dart 中引入 AndroidViewExample，并运行应用即可看到嵌入的 Android 原生视图。

关系图

erDiagram
    PLATFORM_VIEW {
        string viewType
    }
    ANDROID_VIEW {
        string viewType
    }
    PLATFORM_VIEW ||--|| ANDROID_VIEW

结论

通过 PlatformView 和 AndroidView，我们可以在 Flutter 应用中轻松地嵌入原生 Android 视图，实现更丰富的功能和用户体验。希望本文对您有所帮助，谢谢阅读！