Koltin Jetpack compose，ModalBottomSheetLayout 停在屏幕中间

Question

我是jetpack compose的新手，我真的很喜欢它。但遇到了一个问题：我有一个模式可以占据我所有的屏幕尺寸，按照倍数教程我可以使用 ModalBottomSheetLayout 来做到这一点，这是我的代码：

@ExperimentalMaterialApi
@Composable
fun DetailsScreen() {
    val coroutineScope = rememberCoroutineScope()
    val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)

    ModalBottomSheetLayout(
        sheetContent = {
            Box(
                modifier = Modifier
                    .navigationBarsWithImePadding()
                    .fillMaxSize()
                    .wrapContentHeight() //changed here to have full screen size, but it was only half screen, i had to slide with my finger to make the modal to full screen
                    //.height(200.dp) initial value i have a little modal on the bottom
                    //.fillMaxWidth()
                    .background(Color.White)
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(10.dp)
                ) {
                    Text(
                        text = "Bottom Sheet",
                        textAlign = TextAlign.Center,
                        style = MaterialTheme.typography.h5,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.fillMaxWidth()
                    )
                    Text(
                        text = "Item 1",
                        style = MaterialTheme.typography.h6,
                        modifier = Modifier.padding(top = 10.dp)
                    )
                    Text(
                        text = "Item 2",
                        style = MaterialTheme.typography.h6,
                        modifier = Modifier.padding(top = 10.dp)
                    )
                    Text(
                        text = "Item 3",
                        style = MaterialTheme.typography.h6,
                        modifier = Modifier.padding(top = 10.dp)
                    )
                }
            }
        },
        sheetState = sheetState,
        sheetBackgroundColor = Color.White
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(
                            text = "Modal Bottom Sheet",
                            modifier = Modifier.fillMaxWidth(),
                            textAlign = TextAlign.Center
                        )
                    }
                )
            }
        ) {
            MainContent(
                onClick = {
                    coroutineScope.launch {
                        //sheetState.show() // changed here make the modal full screen at the beginning
                        sheetState.animateTo(ModalBottomSheetValue.Expanded)
                    }
                },
                modifier = Modifier.padding(it)
            )
        }
    }
}

@Composable
fun MainContent(
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier.fillMaxSize()
    ) {
        Button(
            onClick = onClick,
            shape = RoundedCornerShape(10.dp)
        ) {
            Text(
                text = "Click Me!",
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.h6.copy(color = Color.White)
            )
        }
    }
}

我遇到的问题：起初模式位于底部，所以我将框设置为 fillMaxSize 以使其全屏，但它只打开到半屏，我滑动向上滑动以使其全屏。

然后我发现我可以将sheetState.show()更改为sheetState.animateTo(ModalBottomSheetValue.Expanded)以使我的模式从显示的那一刻起全屏。完美就是我想要的。这是模式的屏幕：

问题是，现在当我向下滑动以关闭模式时，它会停止半屏，如下所示：

从那里我必须再次向下滑动才能使其消失。另外，当它位于中间时，我可以向上滑动以使其返回全屏。似乎有 3 种状态：全屏、半屏和消失。并且模态可以是全屏或半屏。我想去掉半屏。因此，当我打开模式时，它是全屏的，当我向下滑动以删除它时，它会消失而不会在中间停止。所以我只需一个手势即可将其删除。

Answer 1

我认为你可以通过skipHalfExpanded属性获得这种行为：

val bottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Expanded, skipHalfExpanded = true)

Answer 2

Material3 对模态底部表单使用不同的方法：

var skipPartiallyExpanded by remember { mutableStateOf(true) }
val bottomSheetState = rememberModalBottomSheetState(
    skipPartiallyExpanded = skipPartiallyExpanded )

ModalBottomSheet(
    onDismissRequest = { },
    sheetState = bottomSheetState,
){
//content 
}