如何处理 Jetpack Compose 中文本的可见性？

Question

我有这个文本：

 Text(
    text = stringResource(id = R.string.hello)
)

如何显示和隐藏此组件？

我正在使用 Jetpack Compose 版本 “1.0.0-alpha03”

原文由 Agna JirKon Rx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 CommonsWare 所述，compose 作为一个声明性工具包，您将组件绑定到一个状态（例如： isVisible ），然后 compose 将智能地决定哪些可组合项依赖于该状态并重新组合它们。例如：

 @Composable
fun MyText(isVisible: Boolean){
  if(isVisible){
     Text(text = stringResource(id = R.string.hello))
  }
}

您也可以使用 AnimatedVisibility() 可组合的动画。

原文由 Róbert Nagy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 1.0.x 您可以简单地添加如下条件：

   if(isVisible){
     Text("....")
  }

就像是：

 var visible by remember { mutableStateOf(true) }
Column() {
    if (visible) {
        Text("Text")
    }
    Button(onClick = { visible = !visible }) { Text("Toggle") }
}

如果你想动画其内容的出现和消失，你可以使用 AnimatedVisibility

 var visible by remember { mutableStateOf(true) }
Column() {
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn(
            // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default
            initialAlpha = 0.4f
        ),
        exit = fadeOut(
            // Overwrites the default animation with tween
            animationSpec = tween(durationMillis = 250)
        )
    ) {
        // Content that needs to appear/disappear goes here:
        Text("....")
    }
    Button(onClick = { visible = !visible }) { Text("Toggle") }
}

原文由 Gabriele Mariotti 发布，翻译遵循 CC BY-SA 4.0 许可协议