如何在 Jetpack compose 中创建圆角 BottomDrawer（又名 Modal Bottom Sheet）答案

【问题标题】：How to create rounded corner BottomDrawer (aka Modal Bottom Sheet) in Jetpack compose如何在 Jetpack compose 中创建圆角 BottomDrawer（又名 Modal Bottom Sheet）
【发布时间】：2022-05-25 21:37:44
【问题描述】：

如何在新的 android jetpack compose 中创建圆角 BottomDrawer（又名 Modal Bottom Sheet）。

例如图片

【问题讨论】：

在材料设计中使用底页

标签： android android-jetpack-compose bottom-sheet

【解决方案1】：

您可以在 BottomSheetScaffold 或 ModalBottomSheetLayout 中使用 sheetShape 参数。

类似：

BottomSheetScaffold(
        sheetShape = RoundedCornerShape(16.dp),
        /* ... */
){}

【讨论】：

底页展开时，背景不会变暗。你知道怎么加吗？
我可以为圆角底页设置边距吗？

【解决方案2】：

我们可以使用 ButtomDrawer 和 Surface 在 jetpack compose 中轻松创建。


@Composable
fun RoundedBottomDrawer(){

    val scope = rememberCoroutineScope()
    val drawerState = rememberBottomDrawerState(initialValue = BottomDrawerValue.Closed)

    BottomDrawer(
        gesturesEnabled = true, // making scrollable to fit screen
        drawerState = drawerState,
        drawerBackgroundColor = Color.Transparent, // transparent background
        drawerContent = {

            Button(onClick = { scope.launch { drawerState.close() } }) {
                    Text("Close")
            }
            
            Spacer(modifier = Modifier.height(16.dp)) // some padding

            BottomDrawerSurface()

        },
        content = {
            // outside content
            Button(onClick = { scope.launch { drawerState.open() } }) {
                    Text("Open BottomDrawer")
            }
        }
    )
}

@Composable
fun BottomDrawerSurface() {
    Surface(
        color = Color.White,
        shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
    ) {
        // your design..
    }
}

【讨论】：

【解决方案3】：

在您的情况下，您需要为添加此属性的顶部开始和结束角倒圆：

sheetShape = RoundedCornerShape(topEnd = 16.dp, topStart = 16.dp)

在你的BottomSheetScaffold。

【讨论】：