如何在Flutter混合开发中避免遮挡原生布局？

Android

2023-12-19 17:20:18

在Flutter与原生代码混合开发的过程中，我们可能会遇到这样一个问题：Flutter中的视图会遮挡原生布局中的某些视图。这种遮挡现象通常发生在使用相对布局（RelativeLayout）的情况下。

问题原因

这个问题的根源在于Flutter默认的渲染模式（RenderMode.surface）。在这种模式下，Flutter会创建自己的独立渲染层，并将其叠加在原生视图之上。当Flutter视图包含半透明或重叠的元素时，就会出现遮挡问题。

解决方法

为了解决这个问题，我们可以使用以下方法：

修改Flutter的渲染模式：

将Flutter的渲染模式更改为RenderMode.texture。这种模式不会创建独立的渲染层，而是直接将Flutter内容绘制到原生视图中。这样可以避免遮挡问题。
使用容器布局：

在原生布局中，使用容器布局（如FrameLayout或LinearLayout）将Flutter视图包装起来。这样可以确保Flutter视图不会直接覆盖原生视图。
调整Flutter视图的层级：

在Flutter代码中，通过设置child元素的elevation属性，可以调整其层级。将遮挡原生视图的Flutter元素设置更高的层级，可以使其位于原生视图之上。

具体示例

下面是一个具体示例，说明如何在Flutter混合开发中解决遮挡问题：

// Kotlin 代码
val flutterView = FlutterView(this)
flutterView.setRenderMode(RenderMode.TEXTURE)

val layout = RelativeLayout(this)
layout.addView(flutterView)

setContentView(layout)

// Dart 代码
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          // 设置elevation属性提高层级
          elevation: 10.0,
          child: Center(
            child: Text('Flutter'),
          ),
        ),
      ),
    );
  }
}