kotlin 外部点击时Jetpack合成折叠底部表单

72qzrwbm  于 2023-02-16  发布在  Kotlin
关注(0)|答案(2)|浏览(126)

我当前通过BottomSheetScaffold显示底部工作表,并希望在用户单击底部工作表外部时折叠它。是否有方法检测底部工作表外部的单击?
这是我的BottomSheetScaffold的屏幕:

@ExperimentalMaterialApi
@ExperimentalMaterial3Api
@Composable
fun HomeScreen() {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )
    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Box(
                Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(0.9f)
            ) {
                Text("Hello from Sheet")
            }
        },
        sheetShape = RoundedCornerShape(
            topStart = Spacing.l,
            topEnd = Spacing.l
        ),
        sheetPeekHeight = LocalConfiguration.current.screenHeightDp.dp * 0.15f,
        sheetBackgroundColor = MaterialTheme.colorScheme.surface,
    ) {
        Scaffold() {
            Button(
                onClick = {
                    coroutineScope.launch {
                        if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                            bottomSheetScaffoldState.bottomSheetState.expand()
                        } else {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                        }
                    }
                },
            ) {
                Text("Toggle Sheet")
            }
        }

    }
}

这是一个可视化的区域,如果展开了底部工作表,我希望在其中检测点击。

olhwl3o2

olhwl3o21#

可以将带有detectTapGesturespointerInput修改器添加到Scaffold

Scaffold( modifier =
        Modifier.pointerInput(Unit) {
            detectTapGestures(onTap = {
                coroutineScope.launch {
                    if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                        bottomSheetScaffoldState.bottomSheetState.expand()
                    } else {
                        bottomSheetScaffoldState.bottomSheetState.collapse()
                    }
                }
            })
    }){
       //.....
    }
wgeznvg7

wgeznvg72#

我在使用BottomSheetScaffold时也遇到了同样的问题,我将其更改为默认情况下已经具有该行为的ModalBottomSheetLayout

相关问题