Jetpack Compose中仅允许从屏幕左边缘滑动打开NavigationDrawer

要实现仅从屏幕左边缘滑动才打开NavigationDrawer，你需要禁用默认的全局滑动手势，然后自定义边缘滑动检测逻辑：

1. 关闭ModalNavigationDrawer的默认手势支持
2. 在页面根布局添加自定义手势监听，仅响应左边缘区域的左向右滑动

修改后的完整代码如下：

@Composable
fun MainScreen() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    // 定义触发抽屉的边缘宽度，可根据需求调整
    val edgeTriggerWidth = 24.dp

    ModalNavigationDrawer(
        gesturesEnabled = false, // 禁用默认全局滑动手势
        drawerContent = { DrawerContent() },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                MyTopAppBar {
                    scope.launch {
                        drawerState.open()
                    }
                }
            },
            bottomBar = {
                MyBottomAppBar(modifier = Modifier.height(65.dp)) {
                    val modifier = Modifier
                        .weight(1f)
                        .fillMaxHeight()

                    BottomAppBarItem(
                        "Calls",
                        Icons.Filled.Call,
                        false,
                        modifier
                    )
                    BottomAppBarItem(
                        "Search",
                        Icons.Filled.Search,
                        true,
                        modifier
                    )
                    BottomAppBarItem(
                        "Contacts",
                        Icons.Filled.AccountBox,
                        false,
                        modifier
                    )
                }
            }
        ) { paddingValues ->
            Surface(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues)
                    .pointerInput(drawerState) {
                        val edgeWidthPx = edgeTriggerWidth.toPx()
                        detectHorizontalDragGestures(
                            // 仅当触摸起始点在左边缘范围内时，才处理后续拖动
                            onDragStart = { offset ->
                                if (offset.x > edgeWidthPx) {
                                    consumeAllEvents() // 消费事件，不响应后续拖动
                                }
                            }
                        ) { _, dragAmount ->
                            // 左向右滑动且抽屉处于关闭状态时，打开抽屉
                            if (dragAmount > 0 && drawerState.isClosed) {
                                scope.launch {
                                    drawerState.open()
                                }
                            }
                        }
                    },
                color = MaterialTheme.colorScheme.background
            ) {
                // 页面内容
            }
        }
    }
}

关键说明： #

• gesturesEnabled = false：关闭抽屉自带的全局滑动触发逻辑，避免任意位置滑动都能打开抽屉
• edgeTriggerWidth：自定义触发抽屉的边缘宽度，这里设为24dp，你可以根据设计需求调整
• pointerInput中的手势检测：通过detectHorizontalDragGestures监听水平拖动，在onDragStart判断触摸起始点是否在左边缘范围内，不在则消费事件；在拖动过程中判断是左向右滑动且抽屉关闭时，触发抽屉打开操作

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