禁用手势后，如何检测ModalNavigationDrawer外部的屏幕点击？

当你禁用ModalNavigationDrawer的手势后，默认的遮罩点击关闭逻辑也会失效，你可以通过自定义遮罩层来实现点击外部关闭抽屉的需求，具体代码如下：

@Composable
fun DrawerWithPagerExample() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            // 你的抽屉内容
            Column(modifier = Modifier.fillMaxHeight().width(250.dp).background(Color.White)) {
                Text("抽屉选项1", modifier = Modifier.padding(16.dp))
                Text("抽屉选项2", modifier = Modifier.padding(16.dp))
                Text("抽屉选项3", modifier = Modifier.padding(16.dp))
            }
        },
        drawerGesturesEnabled = false // 禁用抽屉手势，避免和HorizontalPager冲突
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            // 主内容区域（包含HorizontalPager和打开按钮）
            Column(modifier = Modifier.fillMaxSize()) {
                Button(
                    onClick = {
                        scope.launch { drawerState.open() }
                    },
                    modifier = Modifier.padding(16.dp)
                ) {
                    Text("打开抽屉")
                }

                // 你的HorizontalPager
                HorizontalPager(count = 3) { page ->
                    Box(
                        modifier = Modifier.fillMaxSize().background(
                            when (page) {
                                0 -> Color.LightGray
                                1 -> Color.Gray
                                else -> Color.DarkGray
                            }
                        ),
                        contentAlignment = Alignment.Center
                    ) {
                        Text("页面 $page", fontSize = 24.sp)
                    }
                }
            }

            // 自定义遮罩层：仅在抽屉打开时显示
            if (drawerState.isOpen) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color.Black.copy(alpha = 0.5f)) // 半透明背景模拟默认遮罩
                        .clickable {
                            // 点击遮罩关闭抽屉
                            scope.launch { drawerState.close() }
                        }
                )
            }
        }
    }
}

逻辑说明： #

• 禁用抽屉手势：保持drawerGesturesEnabled = false，避免和HorizontalPager的横向滑动手势冲突。
• 自定义遮罩层：通过drawerState.isOpen判断抽屉状态，仅在抽屉打开时添加全屏的半透明遮罩。
• 遮罩点击事件：给遮罩添加clickable修饰符，点击时通过coroutineScope调用drawerState.close()关闭抽屉。
• 层级关系：遮罩层放在主内容之后、抽屉内容之下（ModalNavigationDrawer的drawerContent默认在最上层），因此点击抽屉内部不会触发关闭，只有点击遮罩（外部区域）才会关闭。

这种方法不会干扰HorizontalPager的正常滑动，同时完美实现了点击外部关闭抽屉的需求。

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