android 在构成中以动画显示可见性

v9tzhpje  于 2022-11-20  发布在  Android
关注(0)|答案(2)|浏览(130)

我有一个文本,需要动画显示和隐藏的值是空或不。它本来是直接向前,如果可见性是单独处理,但这是我得到的。在下面的代码中,进入动画工作,但退出动画不作为文本值是空的。我可以想到的东西与记住旧值,但不知道如何。

@Composable
fun ShowAnimatedText(
    text : String?
) {
    Column(
        modifier = Modifier.fillMaxWidth()
    ) {
        AnimatedVisibility(
            visible = text != null,
            enter = fadeIn(animationSpec = tween(2000)),
            exit = fadeOut(animationSpec = tween(2000))
        ) {
            text?.let {
                Text(text = it)
            }
        }
    }
}
68bkxrlz

68bkxrlz1#

我认为淡出动画实际上是工作“本身”。
我怀疑参数text: String?是一个来自ShowAnimatedText之上某个提升“状态”的值,由于您是在animating作用域中直接观察它,因此当您将其更改为null时,它会立即删除Text组合对象,您不会看到缓慢的淡出。

AnimatedVisibility(
    ...
) {
    text?.let { // your'e directly observing a state over here
        Text(text = it)
    }
}

这是我尝试完成你的片段基于我的假设,并使它的工作,淡入的工作,但所需的淡出是立即发生。

@Composable
fun SomeScreen() {

    var text by remember {
        mutableStateOf<String?>("Initial Value")
    }

    Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Button(onClick = {
            text = "New Value"
        }) {
            Text("Set New Value")
        }

        Button(onClick = {
            text = null
        }) {
            Text("Remove Value")
        }

        AnimatedText(text = text)
    }
}

@Composable
fun ShowAnimatedText(
    text : String?
) {
    Column(
        modifier = Modifier.fillMaxWidth()
    ) {
        AnimatedVisibility(
            visible = text != null,
            enter = fadeIn(animationSpec = tween(2000)),
            exit = fadeOut(animationSpec = tween(2000))
        ) {
            text?.let {
                Text(text = it)
            }
        }
    }
}

您可以通过将text修改为非状态值,并将可见性逻辑从使用可空性检查更改为某种“业务逻辑”(要求它为visiblehidden)来解决此问题,修改上面的代码,如下所示。

@Composable
fun SomeScreen() {

    var show by remember {
        mutableStateOf(true)
    }

    Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Button(onClick = {
            show = !show
        }) {
            Text("Set New Value")
        }

        AnimatedText(text = "Just A Value", show)
    }
}

@Composable
fun ShowAnimatedText(
    text : String?,
    show: Boolean
) {

    Column(
        modifier = Modifier.fillMaxWidth()
    ) {
        AnimatedVisibility(
            visible = show,
            enter = fadeIn(animationSpec = tween(2000)),
            exit = fadeOut(animationSpec = tween(2000))
        ) {

            text?.let {
                Text(text = it)
            }
        }
    }
}

5f0d552i

5f0d552i2#

如果文本为空,我通过记住之前的状态(或者不设置空值)直到退出动画完成来修复它。
谢谢你的建议z.y

@Composable
fun ShowAnimatedText(
    text : String?,
    show: Boolean
) {
    var localText by remember {
        mutableStateOf<String?>(null)
    }
    AnimatedContent(show, localText)
    LaunchedEffect(key1 = text, block = {
        if(text == null){
            delay(2000)
        }
        localText = text
    })
}
@Composable
private fun AnimatedContent(show: Boolean, localText: String?) {
    Column(
        modifier = Modifier.fillMaxWidth()
    ) {
        AnimatedVisibility(
            visible = show,
            enter = fadeIn(animationSpec = tween(2000)),
            exit = fadeOut(animationSpec = tween(2000))
        ) {
            localText?.let {
                Text(text = it)
            }
        }
    }
}

相关问题