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

【问题标题】：How to handle visibility of a Text in Jetpack Compose?如何处理 Jetpack Compose 中文本的可见性？
【发布时间】：2020-10-14 23:24:43
【问题描述】：

我有这个文本：

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

如何显示和隐藏这个组件？

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

【问题讨论】：

"如何显示和隐藏这个组件？" -- 将该函数调用包装在if 块中，该块可以调用或不调用它。请记住：Compose 是一个功能性的反应式 UI 框架。每次需要更改时都会调用您的代码。因此，“显示”和“隐藏”场景都将调用您的代码，并且您需要该函数中的逻辑来处理这两种情况。

标签： android android-jetpack-compose

【解决方案1】：

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

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

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

【讨论】：

这是一个很好的答案。但是如果我需要一个元素来占据它的边界但不可见呢？我们曾经有 View.VISIBLE、View.INVISIBLE 和 View.GONE。使用 if 它只是实现 GONE 和 VISIBLE
@SomerandomITboy 那么我可能会在修饰符内移动我的内容，类似于Modifier.opacity(if(isVisible) 1f else 0f)
我不知道那个修饰符。谢谢！
在 1.0.0-beta04 上尝试使用Modifier.alpha(if(isVisible) 1f else 0f)
这是仅在视图可见时才创建文本，对吗？有什么方法可以先创建视图然后控制其可见性？

【解决方案2】：

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

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

类似：

var visible by remember { mutableStateOf(true) }
Column() {
    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") }
}

【讨论】：

这是仅当视图可见时才创建文本对吗？。有什么方法可以先创建视图，然后控制其可见性？

【解决方案3】：

如上所述，您可以像这样使用 AnimatedVisibility：

AnimatedVisibility(visible = yourCondition) { Text(text = getString(R.string.yourString)) }

【讨论】：

这是仅在视图可见时才创建文本，对吗？有什么方法可以先创建视图然后控制其可见性？