如何获取LazyColumn点击位置并实现类Gmail页面转场动画

问题原因 #

你当前的代码无法获取LazyColumn条目内点击位置的核心原因是：条目内部的clickable会消费点击事件，导致外层LazyColumn的pointerInput无法接收到条目区域的点击信号。

解决步骤 #

1. 在条目内部处理点击并获取全局位置 #

将点击逻辑移至条目内部，通过pointerInput替代clickable捕获点击偏移，同时结合onGloballyPositioned获取条目的全局布局边界，最终计算出点击位置的全局坐标（用于转场动画）。

2. 实现类似Gmail的转场动画 #

基于获取到的全局点击位置，使用Compose的AnimatedContent自定义进入/退出动画，模拟Gmail详情页的展开效果。

完整代码示例 #

@Composable
fun MailListScreen(list: List<String>) {
    val showDetail = remember { mutableStateOf(false) }
    val clickGlobalPosition = remember { mutableStateOf(Offset.Zero) }

    AnimatedContent(
        targetState = showDetail.value,
        transitionSpec = {
            // 自定义进入动画：从点击位置缩放+淡入展开
            val enter = scaleIn(
                initialScale = 0.8f,
                initialOffset = {
                    // 计算点击位置相对于屏幕中心的偏移，让动画从点击点发起
                    val screenWidth = LocalConfiguration.current.screenWidthDp.dp.toPx()
                    val screenHeight = LocalConfiguration.current.screenHeightDp.dp.toPx()
                    Offset(
                        x = clickGlobalPosition.value.x - screenWidth / 2f,
                        y = clickGlobalPosition.value.y - screenHeight / 2f
                    )
                }
            ) + fadeIn(animationSpec = tween(300))
            
            // 退出动画：淡入+缩放收起
            val exit = fadeOut(animationSpec = tween(200)) + scaleOut(targetScale = 0.8f)
            
            enter with exit
        }
    ) { isShowingDetail ->
        if (isShowingDetail) {
            // 详情页组件，接收点击位置用于动画（可选）
            MailDetailScreen(
                onBack = { showDetail.value = false },
                clickPosition = clickGlobalPosition.value
            )
        } else {
            LazyColumn(modifier = Modifier.fillMaxSize()) {
                items(list) { item ->
                    var itemGlobalBounds by remember { mutableStateOf(Rect.Zero) }
                    
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp)
                            // 获取条目的全局布局边界
                            .onGloballyPositioned { coordinates ->
                                itemGlobalBounds = coordinates.boundsInWindow()
                            }
                            // 捕获条目内的点击事件及偏移
                            .pointerInput(Unit) {
                                detectTapGestures { localOffset ->
                                    // 计算点击位置的全局坐标
                                    val globalX = itemGlobalBounds.left + localOffset.x
                                    val globalY = itemGlobalBounds.top + localOffset.y
                                    clickGlobalPosition.value = Offset(globalX, globalY)
                                    
                                    // 触发详情页显示
                                    showDetail.value = true
                                }
                            }
                    ) {
                        // 条目内容示例
                        Text(text = item, fontSize = 18.sp)
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "邮件预览内容", fontSize = 14.sp, color = Color.Gray)
                    }
                }
            }
        }
    }
}

@Composable
fun MailDetailScreen(onBack: () -> Unit, clickPosition: Offset) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("邮件详情") },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                    }
                }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .padding(16.dp)
        ) {
            // 详情页内容
            Text(text = "邮件正文内容", fontSize = 16.sp)
            // 可根据clickPosition做额外动画（可选）
        }
    }
}

关键说明 #

• 事件消费问题：将点击逻辑移至条目内部后，避免了外层事件被拦截的问题，能直接捕获条目内的点击偏移。
• 全局位置计算：boundsInWindow()获取条目在屏幕中的绝对坐标，加上局部点击偏移后得到全局点击位置，为转场动画提供准确的起点。
• 转场动画：通过scaleIn结合initialOffset实现从点击位置展开的效果，接近Gmail的详情页打开动画。

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