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

原生视图是如何通过Flutter进行加载渲染和交互

介绍
一句话概括
- [1.在 Android 原生代码中注册 PlatformView](#1.在 Android 原生代码中注册 PlatformView)
- [2.Flutter 中使用 PlatformViewLink 加载这个原生 View](#2.Flutter 中使用 PlatformViewLink 加载这个原生 View)

介绍

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

一句话概括

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

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

先创建NativeViewFactory视图类

kotlin 复制代码

class NativeTextView(context: Context, id: Int, creationParams: Map<String?, Any?>?) : PlatformView {
    private val textView: TextView = TextView(context).apply {
        text = "这是原生 Android TextView"
        textSize = 20f
        setTextColor(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类，并进行注册：

kotlin 复制代码

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视图，进行渲染

dart 复制代码

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

class NativeTextView extends StatelessWidget {
  const NativeTextView({super.key});

  @override
  Widget build(BuildContext context) {
    const String viewType = 'native-text-view';
    return AndroidView(
      viewType: viewType,
      layoutDirection: TextDirection.ltr,
      creationParams: {},
      creationParamsCodec: const StandardMessageCodec(),
    );
  }
}

在Flutter页面中使用

dart 复制代码

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

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 100,
          width: 300,
          child: NativeTextView(),
        ),
      ),
    );
  }
}