单击底页上的关闭按钮可将其隐藏在撰写中

Question

我有以下可组合底页。

我希望能够通过拖动、单击背景并单击关闭按钮来关闭底页。

@Composable
fun CDSModelBottomSheet(toolBar: @Composable () -> Unit, content: @Composable () -> Unit) {
    val modelBottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Expanded
    )

    ModalBottomSheetLayout(
        sheetState = modelBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
        sheetContent = {
            Column {
                toolBar()
                content()
            }
        }
    ) {}
}

@Composable
@Preview
fun PreviewCDSBottomSheet() {
    CDSModelBottomSheet(
        toolBar = { Toolbar(
            title = "Select Account",
            trailingIcon = {
                IconButton(
                    modifier = Modifier.size(24.dp),
                    onClick = {
                        /* close bottom sheet */
                    }
                ) {
                    Icon(
                        imageVector = Icons.Filled.Close,
                        contentDescription = stringResource(R.string.close_bottom_sheet),
                        tint = Color.Black,
                    )
                }
            })},
        content = {
            LoginMode()
        }
    )
}

在 TrailingIcon 中我有一个 onClick 事件。但不确定如何触发底页关闭。除非我必须传递我不想做的 RememberModelBottomSheetState 。

这是预览图

Answer 1

创建一个 lambda 将 ModalBottomSheet 隐藏为

val coroutineScope = rememberCoroutineScope()
val hideModalBottomSheet: () -> Unit = { coroutineScope.launch { sheetState.hide()} }

并通过将

toolbar

更新为

将此 lambda 作为参数传递给您的内容

toolbar: @Composable (() -> Unit) -> Unit

功能齐全

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CDSModelBottomSheet(
    toolBar: @Composable (() -> Unit) -> Unit,
    content: @Composable () -> Unit
) {

    val modelBottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Expanded
    )

    val coroutineScope = rememberCoroutineScope()
    val hideModalBottomSheet: () -> Unit =
        { coroutineScope.launch { modelBottomSheetState.hide() } }


    ModalBottomSheetLayout(
        sheetState = modelBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
        sheetContent = {
            Column {
                toolBar(hideModalBottomSheet)
                content()
            }
        }
    ) {}
}

并将其用作

CDSModelBottomSheet(
    toolBar = { hide: () -> Unit ->
        Toolbar(
            title = "Select Account",
            trailingIcon = {
                IconButton(
                    modifier = Modifier.size(24.dp),
                    onClick = hide
                ) {
                    Icon(
                        imageVector = Icons.Filled.Close,
                        contentDescription = "Close",
                        tint = Color.Black,
                    )
                }
            }
        )
    },
    content = {
        LoginMode()
    }
)