Android XML中ComposeView显隐与重组问题（Jetpack Compose互操作）

所有方案失效的核心原因是ViewModel实例不统一：

• 点击按钮时调用DetailsWidgetViewModel().onTableViewExpanded()会当场创建新的ViewModel实例，仅修改这个临时实例的状态
• Compose代码中DetailsWidgetViewModel().showDetailsWidget.collectAsState()收集的是另一个全新ViewModel实例的状态，始终停留在初始值false，自然无法触发重组
• Compose点击事件里调用的DetailsWidgetViewModel().onTableViewExpanded()又是第三个独立实例，三者状态完全不互通。

第一步：统一ViewModel实例 #

禁止直接通过构造函数创建ViewModel，通过ViewModelProvider从当前页面的ViewModelStore获取同一个实例，保证所有位置操作的是同一个对象：

1. 修改JetpackComposeWidgetData的buildView方法，初始化唯一的ViewModel实例传入Compose：

override fun buildView(inflater: LayoutInflater): View {
    val binding = ViewDetailWidgetDetailsBinding.inflate(inflater, null, false)
    val view = binding.root
    // 从上下文获取绑定当前页面生命周期的ViewModel实例
    val owner = view.context as ViewModelStoreOwner
    val viewModel = ViewModelProvider(owner)[DetailsWidgetViewModel::class.java]

    binding.tableContainerComposeView.setContent {
        JetpackComposeWidget(data = this, viewModel = viewModel)
    }

    return view
}

2. 修改DetailsWidget的按钮点击逻辑，操作同一个ViewModel实例：

tableView.post {
    if (!tableView.isExpanded) {
        buttonContainer.visibility = View.VISIBLE
        expandButton.setOnClickListener {
            tableView.isExpanded = true
            buttonContainer.visibility = View.GONE
            // 获取同一个ViewModel实例更新状态
            val owner = baseView.context as ViewModelStoreOwner
            val viewModel = ViewModelProvider(owner)[DetailsWidgetViewModel::class.java]
            viewModel.onTableViewExpanded()
        }
    }
}

3. 修改Composable代码，接收外部传入的ViewModel，禁止内部自行创建：

@Composable
fun JetpackComposeWidget(data: JetpackComposeWidgetData, viewModel: DetailsWidgetViewModel) {
    val showDetailsWidgetState: Boolean by viewModel.showDetailsWidget.collectAsState()

    if (showDetailsWidgetState) {
        LdpWidgetTheme {
            Surface(
                color = MaterialTheme.colors.surface,
                modifier = Modifier.clickable { viewModel.onTableViewExpanded() }
            ) {
                Column(Modifier.padding(8.dp)) {
                    data.title?.let {
                        Text(
                            text = it,
                            style = MaterialTheme.typography.h4,
                        )
                    }
                    data.sections.mapIndexed { index, section -> Section(section, index == 0) }
                }
            }
        }
    }
}

第二步：选择合适的ComposeView显隐方案 #

实例统一后，两种方案都可以正常工作，优先选第一种：

• 推荐方案：ComposeView始终保持VISIBLE状态，完全通过Compose内部的状态控制内容渲染。初始状态下Compose不渲染任何内容，状态变更后自动重组显示目标内容，性能最优，也避免了View层面visibility切换带来的初始挂载问题。
• 备选方案：XML中给ComposeView初始设置android:visibility="gone"，在收到ViewModel的状态变更回调时，再将ComposeView切换为View.VISIBLE。注意不要跳过状态层直接硬改View属性，避免后续状态不同步。

• 不管换StateFlow、LiveData还是MutableState，只要操作的是不同的ViewModel实例，状态就不可能同步
• 手动调用_showDetailsWidget.copy(value = true)修改的是临时实例的状态，Compose收集的实例无法收到更新
• XML配置android:onClick需要匹配宿主Activity的方法签名，和当前Widget架构不兼容，无法生效

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