compose——底部弹窗BottomSheetScaffold和ModalBottomSheetLayout

原创

已于 2023-09-20 10:26:44 修改 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #javascript

于 2023-09-19 14:11:32 首次发布

本文介绍了JetpackCompose中的两种底部弹窗实现方式：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 = "关闭")
                }
            }