Click a close button on a bottomsheet to hide it in compose

user_70942 0
Viewed 108

I have the following composable bottomsheet.

I want to be able to close the bottomsheet either by dragging, clicking the background, and clicking the close button.

@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()
        }
    )
}

In the trailingIcon I have an onClick event. But not sure how to trigger the bottomsheet to close. Unless I have to pass in the rememberModelBottomSheetState which I don't want to do.

This is the preview enter image description here

bottom-sheet android-jetpack-compose
1 Answers

Create a lambda to hide ModalBottomSheet as

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

And pass this lambda as parameter to your content by updating toolbar as

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

Full function

@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()
            }
        }
    ) {}
}

And use it as

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()
    }
)
user_54578530
Related