如何在 JetpackCompose 中设置脚手架抽屉宽度？

Question

我们可以在 JetpackCompose 中使用导航抽屉，Scaffold如下所示

Scaffold(
    drawerContent = { Text(text ="Drawer") }
) {}

我想让抽屉的宽度变小。我怎么能这样做？

Answer 1

您可以使用ScaffolddrawerShape方法中的参数修改形状（包括宽度和高度）。

例如

 Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { Text("Drawer content") },
    drawerShape = customShape(),
    content = {inner padding -> /* Body*/}
)

然后你的 customShape 函数

fun customShape() =  object : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
        ): Outline {
            return Outline.Rectangle(Rect(0f,0f,100f /* width */, 131f /* height */))
     }
 }

您还可以使用Outline.Rounded来获得圆角

Answer 2

您是否尝试过在抽屉可组合项中添加修饰符？

像这样的东西：

Scaffold(drawerContent = { 
        Box(modifier = Modifier.fillMaxWidth(0.9f){
            Text(text = "Drawer") 
        }
    }) {}