Jetpack Compose ModalBottomSheetLayout SheetContent appears not from the bottom of the screen

user_17144541 0
Viewed 1669

I need to show two different bottom sheets in one screen. I change the sheetContent of the ModalBottomSheetLayout dynamically using a dialogType state. I hide the High bottom sheet, change dialogType and show the Short. Short appears from the top of the previous bottom sheet, not from the bottom of the screen, you can see here: 

@Composable
fun BottomSheet() {
    val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()
    var dialogType by remember { mutableStateOf<BottomSheetType>(BottomSheetType.None) }

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            when (dialogType) {
                is BottomSheetType.High -> {
                    LazyColumn {
                        items(10) {
                            Text(text = "Item $it")
                        }

                        item {
                            Button(onClick = {
                                scope.launch {
                                    sheetState.hide()
                                    dialogType = BottomSheetType.Short
                                    sheetState.animateTo(ModalBottomSheetValue.Expanded)
                                }
                            }) {
                                Text(text = "Short Bottom Sheet")
                            }
                        }
                    }
                }
                is BottomSheetType.Short -> {
                    Text(text = "Item 1")
                }
                is BottomSheetType.None -> Spacer(modifier = Modifier.size(1.dp))
            }
        }
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            Button(
                onClick = {
                    dialogType = BottomSheetType.High
                    scope.launch {
                        sheetState.animateTo(ModalBottomSheetValue.Expanded)
                    }
                },
                modifier = Modifier.align(Alignment.Center)
            ) {
                Text(text = "High Bottom Sheet")
            }
        }
    }
}

sealed class BottomSheetType {
    object None : BottomSheetType()
    object High : BottomSheetType()
    object Short : BottomSheetType()
}

If add sheetState.performFling(0.1f) before sheetState.animateTo(ModalBottomSheetValue.Expanded), Short bottom sheet appears correct. Compose version 1.1.0-beta01

bottom-sheet android-jetpack-compose android
1 Answers

It is the default behaviour of ModalBottomSheetLayout. Not just that, many other Composables in Compose are pre-built to incorporate default animations. The only thing you can do is read the docs to see if there is an overriding mechanism provided. Otherwise, you'll only chance is to look at the source code. Just Ctrl + Click on the name of the Composable and you'll see the source. You can copy-paste it, then modify per your needs. I don't think ModalBottomSheetLayout provides a default overriding mechanism, so that's pretty much your answer - It is the implemented behaviour. You'll need to modify the source and create a custom Composable.

user_158808650
Related