如何使用 Jetpack Compose 显示在单击按钮时隐藏的 IconButton？

我在我的ViewModel类，一个State对象的默认值为false.

var menuState = mutableStateOf(false)

现在我想显示IconButton根据 的值menuState:

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

当应用程序启动时，这段代码工作正常，因为我想要IconButton被隐藏。现在，当我想在单击按钮时更改另一个可组合项的可见性时，问题就出现了：

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

什么都没发生。这IconButton仍然隐藏。怎么解决这个问题呢？

试试这个方法：

为 TopBar 创建 Composable 方法并传递布尔参数

@Composable
fun TopBar(isVisible: Boolean) {
    TopAppBar (
        title = {
            Text(
                text = "MyApp",
                fontSize = 18.sp
            )
            if (isVisible) { //Condition
                IconButton(
                    onClick = {
                        //Do stuff
                    }
                ) {
                    Icon(
                        imageVector = Icons.Outlined.MoreVert,
                        contentDescription = null,
                    )
                }
            }
        }
    )
}

之后调用这个方法：

setContent {
    Scaffold(
        topBar =  TopBar(viewModel.menuState.value)       }
    )
}