带有窥视高度的莫代尔底片

Question

我的设计是底板具有一定的窥视高度。 如何使用 Modal Bottom Sheet (Jetpack Compose M3) 实现此设计？

            val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
            val scope = rememberCoroutineScope()

            Scaffold() {
                WeatherView(api = api)
                ModalBottomSheet(
                        modifier = Modifier.fillMaxSize(),
                        sheetState = sheetState,
                        onDismissRequest = {scope.launch { sheetState.partialExpand() }.invokeOnCompletion {
                            if (sheetState.targetValue == SheetValue.Hidden) {
                            }
                        }},
                        shape = RoundedCornerShape(
                            topStart = 20.dp,
                            topEnd = 20.dp
                        ),
                        containerColor = Color.White.copy(0.2f),
                        dragHandle = {
                            BottomSheetDefaults.DragHandle(
                                width = 48.dp,
                                height = 5.dp,
                                color = Color.Black.copy(0.3f)
                            )
                        }
                    ) {
                        BottomSheetContent()
                    }
                }
        }

Answer 1

如果我理解你的问题正确，你至少有 2 个选项来设置 ModalBottomSheet 的高度：

1. 如果高度应基于百分比，则将修饰符

   fillMaxHeight

   应用于

   ModalBottomSheet

   以及所需的分数：

modifier = Modifier.fillMaxHeight(0.5f) // 50% of height

2. 将修改器

   height

   应用于

   ModalBottomSheet

   ，并在

   Dp

   中设置所需的高度：

modifier = Modifier.height(80.dp)

高度基于分数的完整示例：

@Composable
private fun Content() {
    var bottomSheetIsOpen by rememberSaveable { mutableStateOf(false) }

    Scaffold {
        Column(
            modifier = Modifier
                .padding(it)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Screen content"
            )
            ElevatedButton(
                onClick = {
                    bottomSheetIsOpen = true
                }
            ) {
                Text(
                    text = "Show BottomSheet"
                )
            }
        }
    }

    if (bottomSheetIsOpen) {
        BottomSheet(
            closeBottomSheet = {
                bottomSheetIsOpen = false
            }
        )
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun BottomSheet(
    closeBottomSheet: () -> Unit
) {
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    val coroutineScope = rememberCoroutineScope()

    ModalBottomSheet(
        modifier = Modifier.fillMaxHeight(0.5f),
        sheetState = sheetState,
        onDismissRequest = closeBottomSheet
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "BottomSheet content"
            )
            ElevatedButton(
                onClick = {
                    coroutineScope.launch {
                        sheetState.hide()
                    }.invokeOnCompletion {
                        closeBottomSheet()
                    }
                }
            ) {
                Text(
                    text = "Close"
                )
            }
        }
    }
}

结果：