compose——底部弹窗BottomSheetScaffold和ModalBottomSheetLayout

一、底部弹窗BottomSheetScaffold

效果图：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetExample() {
    val scaffoldState = rememberBottomSheetScaffoldState()
    val bottomSheetState = scaffoldState.bottomSheetState

    val scope = rememberCoroutineScope()

    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetContent = {
            Column(modifier = Modifier.padding(16.dp).height(300.dp)) {
                Text(text = "This is a bottom sheet")
                Button(
                    onClick = {
                        // 处理按钮点击事件
                        scope.launch { bottomSheetState.collapse() }
                    },
                    modifier = Modifier.padding(top = 16.dp)
                ) {
                    Text(text = "关闭")
                }
            }
        },
        sheetPeekHeight = 0.dp
    ) {
        // 页面内容
        Button(
            onClick = { scope.launch { bottomSheetState.expand() } },
            modifier = Modifier.padding(16.dp)
        ) {
            Text(text = "打开底部表单")
        }
    }
}

二、底部弹窗ModalBottomSheetLayout

ModalBottomSheetLayout 是 Jetpack Compose 中的一个组件，用于创建底部弹窗。它可以在屏幕底部显示一个半透明的背景，并从底部滑出一个内容面板。ModalBottomSheetLayout 包含两个主要部分：背景和内容面板。

效果图：

代码如下：

val modalBottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden )
    val coroutineScope =rememberCoroutineScope()
    Column {
        // 使用ModalBottomSheetLayout包装BottomSheet的内容
        ModalBottomSheetLayout(
            sheetState = modalBottomSheetState,
            sheetContent = {
                // BottomSheet的内容
                Column {
                    Text("BottomSheet Content")
                    Button(onClick = { coroutineScope.launch { modalBottomSheetState.hide() } }) {
                        Text("Close BottomSheet")
                    }
                }
            }
        ) {
            // 主要内容
            Button(onClick = {
                Log.e("TAG","TTTTT")
                coroutineScope.launch { modalBottomSheetState.show() } }) {
                Text("弹出 BottomSheet")
            }
        }
    }