將導航材料 ModalBottomSheetLayout 展開到最大或自定義高度

Question

我正在嘗試實現https://google.github.io/accompanist/navigation-material/我想將模型表擴展到自定義高度或超過半屏，但我不知道如何實現它

目前 ModelBottomSheet

想像這樣展開

Answer 1

除了使用 ModalBottomSheetState 的 show 方法，您可以使用 animateTo 方法。 show 方法將默認為半屏大小的模式。 animateTo(ModalBottomSheetValue.Expanded) 將擴展到內容的完整大小。 在示例中，我使用 BoxWithConstrains 來獲取屏幕大小並將模態內容的大小設置為 80%。

我希望這有幫助！

@Composable
@Preview
fun BottomSheetDemo() {
    val modalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)

    BoxWithConstraints {
        val sheetHeight = this.constraints.maxHeight * 0.8f
        val coroutineScope = rememberCoroutineScope()
        Column {
            Button(onClick = {
                coroutineScope.launch { modalBottomSheetState.animateTo(ModalBottomSheetValue.Expanded) }
            }) {
                Text(text = "Expand")
            }
            Button(onClick = {
                coroutineScope.launch { modalBottomSheetState.animateTo(ModalBottomSheetValue.Hidden) }
            }) {
                Text(text = "Collapse")
            }
        }
        ModalBottomSheetLayout(
            sheetBackgroundColor = Color.Red,
            sheetState = modalBottomSheetState,
            sheetContent = {
                Box(modifier = Modifier.height(with(LocalDensity.current) { sheetHeight.toDp() })) {
                    Text(text = "This is some content")
                }
            }
        ) {}
    }
}

編輯：

如果要使用材質導航，則需要自定義擴展 function。 這個function與原版的不同之處在於skipHalfExpanded參數。 這將使創建大於半屏幕的底部工作表成為可能。

@Composable
fun rememberBottomSheetNavigator(
    animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec
): BottomSheetNavigator {
    val sheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        animationSpec = animationSpec,
        skipHalfExpanded = true
    )
    return remember(sheetState) {
        BottomSheetNavigator(sheetState = sheetState)
    }
}

實現本身將是這樣的：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            val bottomSheetNavigator = rememberBottomSheetNavigator()
            val navController = rememberNavController(bottomSheetNavigator)
            ModalBottomSheetLayout(bottomSheetNavigator) {
                NavHost(navController, "home") {
                    composable(route = "home") {
                        Home(navController)
                    }
                    bottomSheet(route = "sheet") {
                        ModalDemo()
                    }
                }
            }
        }
    }
}

@Composable
fun Home(navController: NavController) {
    val coroutineScope = rememberCoroutineScope()
    Column {
        Button(onClick = {
            coroutineScope.launch { navController.navigate("sheet") }
        }) {
            Text(text = "Expand")
        }
    }
}

@Composable
fun ModalDemo() {
    Column(Modifier.fillMaxWidth().height(700.dp).background(Color.Red), horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "This is some content")
    }
}