Jetpack Compose 1.0.5带data标签的ViewDataBinding布局无法预览

问题根因 #

你尝试的4种方案失效的核心原因是：带标签的ViewDataBinding布局设置变量后不会立刻将值同步到View上，且需要绑定生命周期所有者才能正确触发表达式更新，Jetpack Compose 1.0.5版本的预览环境默认不会自动处理这两个逻辑。

可行解决方案 #

方案1：AndroidView手动处理绑定（无需升级依赖，适配1.0.5版本） #

@Preview
@Composable
fun PreviewItemFabScan() {
    AndroidView(
        factory = { context ->
            val binding = ItemFabScanBinding.inflate(LayoutInflater.from(context), null, false)
            // 绑定生命周期所有者，预览环境直接使用Compose提供的LocalLifecycleOwner
            binding.lifecycleOwner = LocalLifecycleOwner.current
            // 设置布局变量
            binding.scanButtonVisible = true
            // 强制立刻执行挂起的绑定操作，将变量值同步到View上
            binding.executePendingBindings()
            return@AndroidView binding.root
        },
        modifier = Modifier.wrapContentSize()
    )
}

可选优化：布局预览兜底 #

如果预览仍出现控件不显示的问题，可以在布局对应控件上添加tools属性做预览兜底，无需修改逻辑代码：

<com.google.android.material.button.MaterialButton
    android:id="@+id/bt_scan"
    ...
    tools:visible="true" />

方案2：升级viewbinding适配库后简化写法 #

如果允许升级依赖，可以将androidx.compose.ui:ui-viewbinding库版本升级到1.1.0-alpha04及以上，直接用AndroidViewBinding实现预览：

@Preview
@Composable
fun PreviewItemFabScan() {
    AndroidViewBinding(ItemFabScanBinding::inflate) {
        lifecycleOwner = LocalLifecycleOwner.current
        scanButtonVisible = true
        executePendingBindings()
    }
}

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