Jetpack Compose点击按钮无法显示隐藏的IconButton如何解决？

问题原因 #

你遇到的核心问题90%以上的概率是不同可组合项中访问的ViewModel不是同一个实例，修改了A实例的状态值，负责渲染TopAppBar的代码读取的是B实例的状态，自然不会发生变化。少数情况是状态声明、状态读取位置不符合Compose规范导致重组未触发。

解决方案 #

1. 确认ViewModel实例唯一性 #

你可以分别在修改状态、读取状态的位置打印ViewModel的hashCode，判断是否是同一个对象：

// 读取状态处打印
Log.d("DEBUG", "TopAppBar viewModel hash: ${viewModel.hashCode()}")
// 修改状态处打印
Log.d("DEBUG", "Button viewModel hash: ${viewModel.hashCode()}")

如果两个hash不一致，按对应场景处理：

• 若使用Navigation组件在不同页面获取ViewModel：获取时指定宿主Activity作为viewModelStoreOwner，示例：

  val viewModel: MyViewModel = viewModel(LocalContext.current as AppCompatActivity)
  

• 若使用Hilt依赖注入：给ViewModel类添加@HiltViewModel注解，构造函数添加@Inject注解：

  @HiltViewModel
  class MyViewModel @Inject constructor() : ViewModel() {
      // 状态声明
  }
  

2. 优化状态声明逻辑 #

建议遵循单向数据流规范，不对外直接暴露可变状态，避免意外修改导致的问题：

// ViewModel内部代码
private val _menuState = mutableStateOf(false)
val menuState: State<Boolean> = _menuState

// 暴露修改状态的方法
fun setMenuVisible(visible: Boolean) {
    _menuState.value = visible
}

修改状态时调用封装好的方法即可：

Button(
    onClick = {
        viewModel.setMenuVisible(true)
    }
) {
    Text(text = "Sign out", fontSize = 18.sp)
}

3. 调整TopAppBar结构（可选优化） #

顶部栏的操作按钮建议放在actions参数中，符合Material Design规范的同时也能避免title区域的布局异常：

setContent {
    Scaffold(
        topBar = {
            TopAppBar (
                title = {
                    Text(text = "MyApp", fontSize = 18.sp)
                },
                actions = {
                    if (viewModel.menuState.value) {
                        IconButton(
                            onClick = {
                                //Do stuff
                            }
                        ) {
                            Icon(
                                imageVector = Icons.Outlined.MoreVert,
                                contentDescription = null,
                            )
                        }
                    }
                }
            )
        }
    )
}

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