Jetpack Compose中实现ImageView隐藏与TextField垂直展开动画

你可以用AnimatedVisibility配合Compose的动画API来实现这个需求，同时结合状态控制视图的显示隐藏与尺寸变化，具体步骤如下：

1. 定义状态控制展开/收起 #

在父布局中声明一个布尔状态，用来标记是否处于展开状态：

var isExpanded by remember { mutableStateOf(false) }

2. 为ImageView添加隐藏动画 #

用AnimatedVisibility包裹ImageView，配置向上滑出的退出动画：

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier.fillMaxSize()
) {
    AnimatedVisibility(
        visible = !isExpanded,
        // 向上滑出+淡出的组合动画
        exit = slideOutVertically(targetOffsetY = { -it }) + fadeOut()
    ) {
        ImageView() // 你的ImageView实现
    }

    InputView(
        isExpanded = isExpanded,
        onClick = { isExpanded = !isExpanded }
    )
}

3. 修改InputView实现展开动画 #

调整InputView的布局，根据isExpanded状态控制TextField的尺寸和其他视图的显示：

@Composable
fun InputView(
    isExpanded: Boolean,
    onClick: () -> Unit
) {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .animateContentSize() // 让布局尺寸变化带有平滑动画
    ) {
        val (inputArea, otherView1, otherView2) = createRefs()

        TextField(
            value = "", // 替换为你的实际文本值
            onValueChange = {}, // 替换为你的文本变更逻辑
            colors = TextFieldDefaults.textFieldColors(), // 替换为你的自定义颜色
            modifier = Modifier
                .fillMaxWidth()
                .constrainAs(inputArea) {
                    centerHorizontallyTo(parent)
                    top.linkTo(parent.top)
                    // 根据状态切换TextField的高度约束
                    if (isExpanded) {
                        bottom.linkTo(parent.bottom)
                    } else {
                        height = Dimension.value(56.dp) // 非展开状态的固定高度
                    }
                },
            interactionSource = remember { MutableInteractionSource() }
                .also { source ->
                    LaunchedEffect(source) {
                        source.interactions.collect {
                            if (it is PressInteraction.Release) {
                                onClick()
                            }
                        }
                    }
                }
        )

        // 为其他视图添加向下滑出的隐藏动画
        AnimatedVisibility(
            visible = !isExpanded,
            exit = slideOutVertically(targetOffsetY = { it }) + fadeOut()
        ) {
            OtherView1(modifier = Modifier.constrainAs(otherView1) {
                // 保留你原来的约束配置
            })
        }

        AnimatedVisibility(
            visible = !isExpanded,
            exit = slideOutVertically(targetOffsetY = { it }) + fadeOut()
        ) {
            OtherView2(modifier = Modifier.constrainAs(otherView2) {
                // 保留你原来的约束配置
            })
        }
    }
}

关键说明 #

• AnimatedVisibility是处理视图显隐动画的核心组件，通过exit参数配置滑出方向和淡出效果
• animateContentSize()让布局尺寸变化时产生平滑过渡，保证TextField展开时的流畅感
• 利用ConstraintLayout的约束条件，在展开状态让TextField填充满可用空间，非展开状态保持固定高度
• 其他视图的隐藏动画采用向下滑出，与ImageView的向上滑出形成视觉呼应

需要导入的动画相关包：

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.animateContentSize

内容的提问来源于stack exchange，提问作者Steyrix