Jetpack Compose如何让容器忽略触摸事件不拦截下层组件交互

问题背景 #

尝试在Jetpack Compose中实现React-Native应用内的Toast栈功能。
MainActivity代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val toastStack = ToastStack()

        setContent {
            MainContent(toastStack) // 内部包含往栈中添加Toast的业务逻辑
            ToastStack(toastStack) // 负责渲染展示Toast栈
        }
    }
}

ToastStack组件代码：

@Composable
fun ToastStack(toastStack: ToastStack) {
    val stack by toastViewModel.stack.observeAsState(listOf())

    LazyColumn(
        verticalArrangement = Arrangement.Bottom,
        userScrollEnabled = false,
        modifier = Modifier
            .fillMaxSize(),
    ) {
        items(stack, key = { it.id }) { toast ->
            Toast(
                toast = toast,
                onToastEnd = { toastStack.removeToast(toast.id) }
            )
        }
    }
}

遇到的问题：LazyColumn占满整个屏幕尺寸，会拦截所有触摸事件，导致下层的MainContent无法响应触摸操作。需要实现和React Native中pointerEvents="box-none"一致的效果：容器自身不拦截空白区域的触摸事件，事件透传给下层布局，仅容器内的实际子元素（即Toast项）可以正常响应触摸。

实现方案 #

直接给占满全屏的LazyColumn加自定义pointerInput修饰符，不消费任何初始阶段的触摸事件即可，完全等效RN的box-none效果，修改后的ToastStack代码如下：

@Composable
fun ToastStack(toastStack: ToastStack) {
    val stack by toastViewModel.stack.observeAsState(listOf())

    LazyColumn(
        verticalArrangement = Arrangement.Bottom,
        userScrollEnabled = false,
        modifier = Modifier
            .fillMaxSize()
            // 以下代码实现box-none事件透传效果
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        // 在Initial事件通道获取事件，不做任何消费操作直接放行
                        awaitPointerEvent(PointerEventPass.Initial)
                    }
                }
            },
    ) {
        items(stack, key = { it.id }) { toast ->
            Toast(
                toast = toast,
                onToastEnd = { toastStack.removeToast(toast.id) }
            )
        }
    }
}

实现逻辑说明 #

• Compose触摸事件分发分为Initial、Main、Final三个传递阶段，在Initial阶段不消费事件时，事件会自动透传给z序更低的下层布局（即MainContent）
• LazyColumn内部的子项（Toast）会在Main阶段正常处理触摸事件，如果Toast设置了点击、滑动等手势逻辑，会正常消费对应区域的事件，不会透传到下层
• 空白区域没有子项消费事件，会直接穿透整个ToastStack容器传递给下层的MainContent，行为和pointerEvents="box-none"完全一致

注意事项 #

• 不要给LazyColumn添加clickable、combinedClickable、toggleable这类默认会消费事件的修饰符，否则会导致透传失效
• 该实现兼容所有正式版本的Jetpack Compose，不需要依赖特定新版本库
• 如果需要实现点击空白区域关闭所有Toast的逻辑，只需要在上述pointerInput代码块中添加对应手势检测、按需消费事件即可

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