Flutter——Android原生View是如何通过Flutter进行加载

介绍

Flutter 中加载 Android 原生视图（View），这是完全可以实现的，Flutter 提供了官方支持：PlatformView（平台视图）机制。

一句话概括

在 Flutter 中通过 PlatformView 将 Android 原生视图（如 TextView、WebView、MapView 等）嵌入到 Flutter 的 Widget 树中。

1.在 Android 原生代码中注册 PlatformView

先创建NativeViewFactory视图类

class NativeTextView(context: Context, id: Int, creationParams: Map<String?, Any?>?) : PlatformView {private val textView: TextView = TextView(context).apply {text = "这是原生 Android TextView"textSize = 20fsetTextColor(Color.RED)}override fun getView(): View {return textView}override fun dispose() {}
}class NativeTextViewFactory(private val messenger: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {override fun create(context: Context, id: Int, obj: Any?): PlatformView {val creationParams = obj as? Map<String?, Any?>return NativeTextView(context, id, creationParams)}
}

然后在创建Plugin类，并进行注册：

class NativeViewPlugin : FlutterPlugin {override fun onAttachedToEngine(flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {flutterPluginBinding.platformViewRegistry.registerViewFactory("native-text-view", NativeTextViewFactory(flutterPluginBinding.binaryMessenger))}override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {}
}

2.Flutter 中使用 PlatformViewLink 加载这个原生 View

创建Widget视图，进行渲染

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';class NativeTextView extends StatelessWidget {const NativeTextView({super.key});@overrideWidget build(BuildContext context) {const String viewType = 'native-text-view';return AndroidView(viewType: viewType,layoutDirection: TextDirection.ltr,creationParams: {},creationParamsCodec: const StandardMessageCodec(),);}
}

在Flutter页面中使用

import 'package:flutter/material.dart';
import 'native_text_view.dart';class MyPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: SizedBox(height: 100,width: 300,child: NativeTextView(),),),);}
}