如何在Jetpack Compose中创建带有圆角的BottomDrawer（也称为Modal Bottom Sheet）

Question

如何在新的Android Jetpack Compose中创建圆角BottomDrawer（又称为Modal Bottom Sheet）。

例如下图：

- user15301088

---

在 Material Design 中使用底部工作表。 - Aasima Jamal

Answer 1

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

例如：

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

- Gabriele Mariotti

---

当底部表单扩展时，背景不会变暗。您知道如何添加它吗？ - Dehan Wjiesekara

我可以为圆角底部表单添加侧边距吗？ - Rafael

Answer 2

在您的情况下，您需要将顶部开始和顶部结束的角落变为圆角，因此请添加以下属性：

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

在你的BottomSheetScaffold中。

- Ali Nawaz

Answer 3

我们可以使用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..
    }
}

- user15301088