如何在不覆盖其他元素的情况下与 Jetpack Compose UI 一起渲染 OpenGL

Question

我正在尝试渲染 OpenGL 视图，并在其下方显示 Jetpack Compose UI。我从 https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose 获取了示例代码，但 OpenGL 正在 Compose 元素上进行绘制。

第一个屏幕截图显示了 Compose 显示的任何元素上的 OpenGL 渲染器。第二个屏幕截图显示了当我从可组合项中删除所有其他可组合元素时的样子。

如何让 OpenGL 尊重其他 Jetpack Compose 元素？如果我能用 Compose 缩小 OpenGL 窗口，我会很高兴，但如果我能在它上面渲染元素那就太好了。

class MyGLSurfaceView(context: Context) : GLSurfaceView(context) {

    private val renderer: MyGLRenderer

    init {
        setEGLContextClientVersion(2)
        renderer = MyGLRenderer()
        setRenderer(renderer)
    }
}
@Composable
fun CustomView() {
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            // Creates view
            MyGLSurfaceView(context).apply { }
        },
        update = { view ->
            // View's been inflated or state read in this block has been updated
            // Add logic here if necessary
        }
    )
}

@Composable
fun ContentExample() {
    Column(Modifier.fillMaxSize()) {
        CustomView()
        Text("Look at this CustomView!")
        Button(onClick = { }) {
            Text("Test button")
        }
    }
}

class MyGLRenderer : GLSurfaceView.Renderer {

    override fun onSurfaceCreated(unused: GL10, config: EGLConfig) {
        // Set the background frame color
        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f)
    }

    override fun onDrawFrame(unused: GL10) {
        // Redraw background color
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
    }
    override fun onSurfaceChanged(unused: GL10, width: Int, height: Int) {
        GLES20.glViewport(0, 0, width, height)
    }
}

Answer 1

好吧，你确实在AndroidView上使用

Modifier.fillMaxSize()

...

如果您想使用相对大小，那么您应该让调用可组合项来处理它，否则很难找出布局实际发生的情况。您应该将

Modifier

参数传递给

CustomView

。

此外，您可能需要应用

clipToBounds()

修饰符以确保 AndroidView 不会超出其大小。

您的 CustomView 应该如下所示：

@Composable
fun CustomView(modifier: Modifier = Modifier) {
    AndroidView(
        modifier = modifier.clipToBounds(),
        ...
    )
}

然后你可以像这样使用它：

Column(Modifier.fillMaxSize()) {
    CustomView(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.5f)
    )

    Text(...)

    Button(...) 
}