如何在使用JetPack组成的全屏水平码头时，可以滑动手势打开Modalnavigation抽水程序？

Question

这是一个具有我代码当前行为的GIF。我可以通过敲击图标并从顶部杆刷子来打开抽屉。

您可以通过使用不再消耗的手势来做到这一点

fun Modifier.customTouch(
    pass: PointerEventPass = PointerEventPass.Main,
    onDown: (pointer: PointerInputChange) -> Unit,
    onMove: (changes: List<PointerInputChange>) -> Unit,
    onUp: () -> Unit,
) = this.then(
    Modifier.pointerInput(pass) {
        awaitEachGesture {
            val down = awaitFirstDown(pass = pass, requireUnconsumed = false)
            onDown(down)
            do {
                val event: PointerEvent = awaitPointerEvent(
                    pass = pass
                )

                onMove(event.changes)

            } while (event.changes.any { it.pressed })
            onUp()
        }
    }
)

由于我们不消耗这种手势将永远不会阻止水平拼写滚动。 inside onmove检查页面是否为零，然后滑动到右开始ModalNavigationDrawer通过禁用HorizontalPagerAS

的手势滚动

Answer 1

Full代码

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun TestNavigationDrawer() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val pagerState = rememberPagerState(initialPage = 0) { 2 }
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            Column(
                Modifier.fillMaxSize().padding(end = 64.dp)
                    .background(MaterialTheme.colorScheme.surface)
                    .systemBarsPadding().systemBarsPadding()
            ) {
                Text("Navigation Drawer")
            }
        }
    ) {

        var scrollEnabled by remember {
            mutableStateOf(true)
        }

        Scaffold(topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Top bar") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            drawerState.open()
                        }
                    }
                    ) {
                        Icon(imageVector = Icons.Default.Info, contentDescription = null)
                    }
                })
        }) { innerPadding ->
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(innerPadding)
                    .customTouch(
                        onDown = {},
                        onMove = { changeList ->
                            changeList.firstOrNull()?.let {
                                if (scrollEnabled && (it.position.x - it.previousPosition.x) > 0f
                                    && pagerState.currentPage == 0
                                ) {
                                    scrollEnabled = false
                                }
                            }
                        },

                        onUp = {
                            scrollEnabled = true
                        }
                    )
            ) {

//                Box(
//                    modifier = Modifier.fillMaxSize(),
//                    contentAlignment = Alignment.Center
//                ) {
//                    Text("Page 0", fontSize = 40.sp, fontWeight = FontWeight.Bold)
//                }

                HorizontalPager(
                    modifier = Modifier
                        .fillMaxSize(),
                    state = pagerState,
                    userScrollEnabled = scrollEnabled
                ) { page ->
                    Box(
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center
                    ) {
                        when (page) {
                            0 -> Text("Page 0", fontSize = 40.sp, fontWeight = FontWeight.Bold)
                            1 -> Text("Page 1", fontSize = 32.sp, fontWeight = FontWeight.Bold)
                        }
                    }
                }
            }
        }
    }
}

，但是，Modalnavigation Drawder由于两件事，您不会获得与Twitter相同的经验。

1-twitter组件在传递斜率阈值之后将动画到指针位置，而ModalNavigationDrawer是不可能的。

2-此外，它也需要快速滑动或滑动才能从非常接近屏幕开始到屏幕开始时才能正确移动。这独立于我发布的水平拼写物或手势，您可以删除手势，只尝试使用框以查看其行为。

要具有确切的行为，您需要在使用手势并禁用HorizontalPager滚动逻辑时编写自定义的合并或手势而不是ModalNavigation抽屉。