Flutter应用多NativeView加载问题：如何实现未知数量原生视图？

我正在为视频聊天应用实现原生视图嵌入（参考Flutter官方文档），希望给每位用户的视频流分配一个NativeView。尝试通过传入不同creationParams来实现，但发现同一时间只能存在一个View，首次创建后无法生成新视图。请问是否需要提前为每个视图注册不同的viewType？或是有更优方案支持创建未知数量的NativeView？

Flutter端代码 #

const String viewType = '<platform-view-type>';
final Map<String, dynamic> creationParams = <String, dynamic>{};

switch (defaultTargetPlatform) {
  case TargetPlatform.android:
    return AndroidView(
      viewType: viewType,
      layoutDirection: TextDirection.ltr,
      creationParams: creationParams,
      creationParamsCodec: const StandardMessageCodec(),
    );
  case TargetPlatform.iOS:
    return UiKitView(
      viewType: viewType,
      layoutDirection: TextDirection.ltr,
      creationParams: creationParams,
      creationParamsCodec: const StandardMessageCodec(),
    );
  default:
    throw UnsupportedError('Unsupported platform view');
}

iOS端注册代码 #

registrar.register(nativeViewFactory, withId: "<platform-view-type>")

Android端注册代码 #

flutterPluginBinding.platformViewRegistry.registerViewFactory("<platform-view-type>", nativeViewFactory)

补充：Android端ViewFactory实现尝试 #

class NativeViewFactory : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    private lateinit var selfVideoView: NativeView
    private val remoteVideoViews: MutableMap<String, NativeView> = HashMap()

    fun getSelfVideo(): NativeView {
        return selfVideoView
    }

    override fun create(context: Context?, viewId: Int, args: Any?): PlatformView {
        val creationParams = args as Map<String?, Any?>?
        return if (context != null) {
            val videoView = NativeView(context, viewId, creationParams)
            if (creationParams == null || creationParams.isEmpty()) {
                selfVideoView = videoView
            } else {
                val username = creationParams["username"] as String
                remoteVideoViews[username] = videoView

                /// ...
                /// Connect video feed of 'username' to videoView
                /// ...
            }
            videoView
        } else {
            throw IllegalStateException("Context is null")
        }
    }
}

不需要为每个NativeView注册不同的viewType，同一个viewType完全支持创建多个实例，你遇到的问题大概率是实现细节上的疏漏。

核心问题排查 #

1. Flutter端参数传递是否正确
   你当前代码里的creationParams是固定空Map，要为每个用户的视频视图传入唯一标识（比如username），比如：

   // 创建本地视图
   _buildNativeView({})
   // 创建远程用户视图
   _buildNativeView({"username": "user123"})
   

   确保每个AndroidView/UiKitView实例都携带差异化参数。

2. Native端视图实例是否独立
   每个NativeView都有唯一的viewId，你的Factory已创建不同的NativeView对象，但要注意：

   • 避免全局变量覆盖问题（比如selfVideoView用lateinit，多次创建空参数视图会覆盖之前实例，但不影响远程视图）
   • 确保每个NativeView实例绑定独立的视频流渲染对象，不要复用同一媒体资源

3. Flutter布局是否合理
   检查承载多视图的布局组件，比如用ListView、GridView或Wrap来排列，避免视图重叠或被隐藏。

优化方案 #

• 复用同一viewType：这是官方推荐方案，通过creationParams区分实例，无需注册多个viewType，减少冗余逻辑。
• 生命周期管理：在Factory中维护视图实例映射（如你用的remoteVideoViews），当Flutter销毁视图时，Native端要同步释放对应视频资源，避免内存泄漏。
• 统一参数规范：定义固定参数结构（比如用type字段区分本地/远程，userId做唯一标识），让Native端处理逻辑更清晰。

Flutter端创建多视图示例：

Wrap(
  children: [
    // 本地视频视图
    _buildNativeView({}),
    // 远程视频视图列表
    ...remoteUsers.map((user) => _buildNativeView({"username": user.id})),
  ],
)

Widget _buildNativeView(Map<String, dynamic> params) {
  switch (defaultTargetPlatform) {
    case TargetPlatform.android:
      return AndroidView(
        viewType: '<platform-view-type>',
        layoutDirection: TextDirection.ltr,
        creationParams: params,
        creationParamsCodec: const StandardMessageCodec(),
      );
    case TargetPlatform.iOS:
      return UiKitView(
        viewType: '<platform-view-type>',
        layoutDirection: TextDirection.ltr,
        creationParams: params,
        creationParamsCodec: const StandardMessageCodec(),
      );
    default:
      throw UnsupportedError('Unsupported platform view');
  }
}

总结 #

同一viewType可以创建任意数量的NativeView实例，问题出在当前实现未正确传递差异化参数，或Native端逻辑存在疏漏。按照上述排查点调整后，即可正常生成多视图。

内容的提问来源于stack exchange，提问作者Ashkan Sarlak