如何在 Desktop Compose 中隐藏按钮

Question

我正在使用 Desktop Compose Multi-Platform 开发应用程序。
单击按钮后，我需要隐藏该按钮。请看下面的代码：

OutlinedButton(
        onClick = {
            // Perform an operation
            // Hide the button
        }) {
        Text(text = "CLick Here")
    }

与 android 相比，Desktop Compose 没有可见性修饰符。
例如visibility = View.GONE

那么如何在 onClick 事件中隐藏按钮？

Answer 1

Compose 中的任何视图修改都是使用状态变量完成的。

如果你需要完全删除视图，你可以这样做：

var isButtonVisible by remember { mutableStateOf(true) }
if (isButtonVisible) {
    OutlinedButton(
        onClick = {
            // Perform an operation
            isButtonVisible = false
        }) {
        Text(text = "CLick Here")
    }
}

如果你想在布局中保存space，你可以简单地用Modifier.alpha隐藏它。例如，如果您有一行包含几个元素并且您不希望它们在按钮消失后移动。

var isButtonVisible by remember { mutableStateOf(true) }
OutlinedButton(
    onClick = {
        // Perform an operation
        isButtonVisible = false
    },
    modifier = Modifier.alpha(if (isButtonVisible) 1f else 0f)
) {
    Text(text = "CLick Here")
}

我建议你查看 Compose documentation, including this youtube video 中的状态，它解释了基本原理。

如何在 Desktop Compose 中隐藏按钮

How to hide button in Desktop Compose

android-jetpack-compose

compose-desktop

jetbrains-compose