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

Question

I have this Text:

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

How can I show and hide this component?

I'm using Jetpack Compose version '1.0.0-alpha03'

Answer 1

As CommonsWare stated, compose being a declarative toolkit you tie your component to a state (for ex: isVisible ), then compose will intelligently decide which composables depend on that state and recompose them. For ex:

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

Also you could use the AnimatedVisibility() composable for animations.

Answer 2

如上所述，您可以使用 AnimatedVisibility ，例如：

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

Answer 3

/**
 * @param visible if false content is invisible ie. space is still occupied
 */
@Composable
fun Visibility(
    visible: Boolean,
    content: @Composable () -> Unit
) {
    val contentSize = remember { mutableStateOf(IntSize.Zero) }

    Box(modifier = Modifier
        .onSizeChanged { size -> contentSize.value = size }) {
        if (visible || contentSize.value == IntSize.Zero) {
            content()
        } else {
            Spacer(modifier = Modifier.size(contentSize.value.width.pxToDp(), contentSize.value.height.pxToDp()))
        }
    }
}


fun Int.pxToDp(): Dp {
    return (this / getSystem().displayMetrics.density).dp
}

usage:

Visibility(text.value.isNotEmpty()) {
    IconButton(
        onClick = { text.value = "" },
        modifier = Modifier
            .padding(bottom = 8.dp)
            .height(30.dp),
    ) {
        Icon(Icons.Filled.Close, contentDescription = "Clear text")
    }
}

Answer 4

With 1.0.0 (tested with 1.0.0-rc02 ) you can simply add a condition like:

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

Something like:

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

If you want to animate the appearance and disappearance of its content you can use the 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") }
}

Answer 5

I am using the following method: AnimatedVisibility https://developer.android.com/jetpack/compose/animation#animatedvisibility

 // Create a MutableTransitionState<Boolean> for the AnimatedVisibility.
                val state = remember {
                    MutableTransitionState(false).apply {
                        // Start the animation immediately.
                        targetState = true
                    }
                }
                Column {
                    AnimatedVisibility(visibleState = state) {
                        Text(text = "Hello, world!")
                    }

                    // Use the MutableTransitionState to know the current animation state
                    // of the AnimatedVisibility.
                    Text(
                        text = when {
                            state.isIdle && state.currentState -> "Visible"
                            !state.isIdle && state.currentState -> "Disappearing"
                            state.isIdle && !state.currentState -> "Invisible"
                            else -> "Appearing"
                        }
                    )
                }

It is also useful for observing the animation state.