Jetpack Compose：如何在Composable不可见时设Visibility为false并重启动画

核心思路是实时检测组件的可见状态，当组件从不可见区域回到可见区域时，重置动画触发状态。以下是针对你现有代码的修改方案：

步骤1：传递父布局的滚动状态 #

将父Column的ScrollState传递给BarComponent，这样能获取当前滚动偏移量来判断组件位置：

@Composable
fun FeaturePage() {
    val scrollState = rememberScrollState()
    Column(modifier = Modifier.verticalScroll(scrollState)) {
        Feature1Component()
        Feature2Component()
        BarComponent(scrollState = scrollState)
    }
}

步骤2：在BarComponent中实现可见性检测与动画重启 #

通过onGloballyPositioned获取组件布局边界，结合滚动状态计算可见性，动态控制visible状态触发动画：

@Composable
fun BarComponent(scrollState: ScrollState) {
    var visible by remember { mutableStateOf(false) }
    var componentBounds by remember { mutableStateOf(Rect.Zero) }
    val screenHeight = LocalConfiguration.current.screenHeightDp.dp

    // 监听滚动和组件位置变化，更新可见状态
    LaunchedEffect(scrollState.value, componentBounds) {
        val componentTop = componentBounds.top - scrollState.value.toDp()
        val componentBottom = componentBounds.bottom - scrollState.value.toDp()
        val isCurrentlyVisible = componentTop < screenHeight && componentBottom > 0.dp

        if (isCurrentlyVisible && !visible) {
            // 先置为false再切换为true，强制动画重启
            visible = false
            delay(10) // 给状态更新留缓冲，确保动画触发
            visible = true
        } else if (!isCurrentlyVisible && visible) {
            visible = false
        }
    }

    val arrowLocation by animateOffsetAsState(
        targetValue = if (visible) arrowEndLocation else arrowStartLocation,
        animationSpec = tween(animationTime, animationDelayTime, easing = LinearOutSlowInEasing)
    )

    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                // 记录组件在父布局中的边界
                componentBounds = coordinates.boundsInParent()
            }
    ) {
        // 保留你原有的LeftColumn、RightColumn等布局内容
        Column(modifier = Modifier.fillMaxSize().padding(5.dp)) {
            LeftColumn(modifier.constrainAs(left) { /* 原有约束 */ })
            RightColumn(modifier.constrainAs(Right) {
                Column {
                    // 其他内容组件
                    LazyColumn(modifier = Modifier.requiredHeight(100.dp)) {
                        // 需要重启动画的内容
                    }
                }
            })
        }
    }
}

关键说明 #

• 可见性判断逻辑：通过组件顶部/底部与屏幕高度、滚动偏移的对比，精准判断组件是否进入可视区域
• 动画重启触发：当组件从不可见变为可见时，先将visible设为false再切换为true，强制animateOffsetAsState重新执行动画
• 状态监听：用LaunchedEffect监听滚动状态和组件位置的变化，确保实时更新可见性状态

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