Jetpack Compose：全屏HorizontalPager下启用滑动打开ModalNavigationDrawer

要实现第0页从左向右滑动打开抽屉、其他页面正常横向切换的效果，核心是给HorizontalPager的第0页添加专属手势监听，优先响应打开抽屉的滑动动作，同时不干扰其他页面的正常交互。

关键修改逻辑 #

• 仅在第0页且抽屉处于关闭状态时，监听从左向右的滑动手势
• 设置滑动距离阈值，避免误触触发抽屉
• 满足条件时触发抽屉打开，并消费滑动事件，阻止HorizontalPager继续处理该动作

修改后的完整代码 #

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun TestNavigationDrawer() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val pagerState = rememberPagerState(initialPage = 0) { 2 }
    val scope = rememberCoroutineScope()
    // 定义滑动触发阈值，可根据需求调整
    val swipeThreshold = with(LocalDensity.current) { 40.dp.toPx() }

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            Column(
                Modifier.fillMaxSize()
                    .padding(end = 64.dp)
                    .background(MaterialTheme.colorScheme.surface)
                    .systemBarsPadding()
            ) {
                Text("Navigation Drawer")
            }
        }
    ) {
        Scaffold(topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Top bar") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            drawerState.open()
                        }
                    }) {
                        Icon(imageVector = Icons.Default.Info, contentDescription = "打开抽屉")
                    }
                })
        }) { innerPadding ->
            Box(modifier = Modifier.fillMaxSize().padding(innerPadding)) {
                HorizontalPager(
                    modifier = Modifier.fillMaxSize(),
                    state = pagerState
                ) { page ->
                    when (page) {
                        0 -> Text(
                            text = "Page 0",
                            modifier = Modifier
                                .fillMaxSize()
                                .pointerInput(drawerState, pagerState) {
                                    var initialTouchX by remember { mutableStateOf(0f) }
                                    detectDragGestures(
                                        onDragStart = { offset ->
                                            initialTouchX = offset.x
                                        },
                                        onDrag = { change, _ ->
                                            val totalSwipeDistance = change.position.x - initialTouchX
                                            // 满足条件时触发抽屉打开并消费事件
                                            if (pagerState.currentPage == 0 && drawerState.isClosed && totalSwipeDistance > swipeThreshold) {
                                                scope.launch {
                                                    drawerState.open()
                                                }
                                                change.consume()
                                            }
                                        }
                                    )
                                }
                        )
                        1 -> Text(text = "Page 1", modifier = Modifier.fillMaxSize())
                    }
                }
            }
        }
    }
}

代码说明 #

1. 滑动阈值：通过swipeThreshold设置触发抽屉的最小滑动距离，减少误操作概率
2. 手势监听：使用pointerInput和detectDragGestures监听第0页的触摸滑动，记录初始触摸位置并计算总滑动距离
3. 条件拦截：仅在当前页面为第0页、抽屉处于关闭状态、滑动距离超过阈值时，才执行抽屉打开操作，并通过change.consume()阻止HorizontalPager处理该滑动事件
4. 页面隔离：第1页保持原有逻辑，可正常进行横向滑动切换

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