将导航材质 ModalBottomSheetLayout 扩展到最大或自定义高度

Question

我正在尝试实现https://google.github.io/accompanist/navigation-material/并且我想将模型表扩展到自定义高度或超过半个屏幕，但我不知道如何实现它

当前型号BottomSheet

想要这样扩展

Answer 1

您可以使用 animateTo 方法，而不是使用 ModalBottomSheetState 的 show 方法。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")
                }
            }
        ) {}
    }
}

编辑：

如果要使用材质导航，则需要自定义扩展功能。该函数与原始函数的区别在于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")
    }
}