Jetpack Compose中嵌入传统View(AndroidView)

发表于 更新于 分类于
Jetpack Compose中嵌入传统View

前言

有一些 View 是 Jetpack Compose 中没有的，比如 WebView，这就需要我们嵌入到我们的 Jetpack Compose 组件中。

示例

它的基本使用方式如下：

  1. 通过 factory 参数创建传统 View 实例
  2. 可选的 update 参数用于在 Compose 状态变化时更新 View

引用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView
import cn.psvmc.ztexview.ZTexView

@Composable
fun ZTexViewCompose(
    htmlContent: String,
    modifier: Modifier = Modifier
) {
    AndroidView(
        modifier = modifier,
        factory = { context ->
            ZTexView(context).apply {
                this.setFontSize(16)
            }
        },
        update = { texView ->
            texView.setText(htmlContent)
        }
    )
}

注意事项

  1. 性能考量：factory 方法可能会被多次调用，避免在其中执行耗时操作
  2. 状态管理：尽量通过 update 方法更新 View，而不是直接在 factory 中处理状态
  3. 生命周期：AndroidView 会自动管理嵌入 View 的生命周期，无需手动处理
  4. Context：factory 方法提供的 context 是正确的上下文，可直接用于创建 View

通过 AndroidView，你可以平滑地将现有 Android 视图系统的代码与 Jetpack Compose 结合，实现渐进式迁移，同时保留和复用现有功能。

设置布局参数

1
2
3
4
5
6
7
8
9
10
11
12
AndroidView(
    factory = {
        // 设置 PreviewView 的布局参数，使其填充父容器
        previewView.layoutParams = android.view.ViewGroup.LayoutParams(
            android.view.ViewGroup.LayoutParams.MATCH_PARENT,
            android.view.ViewGroup.LayoutParams.MATCH_PARENT
        )
        previewView
    },
    modifier = Modifier
        .fillMaxSize()
)