如何在 Jetpack Compose 中设置脚手架抽屉宽度？答案

【问题标题】：How to set the Scaffold Drawer Width in JetpackCompose?如何在 Jetpack Compose 中设置脚手架抽屉宽度？
【发布时间】：2020-12-15 12:20:21
【问题描述】：

我们可以使用Scaffold 在 JetpackCompose 中拥有 Navigation Drawer，如下所示

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

我想让抽屉的宽度变小。我该怎么做？

【问题讨论】：

我为此创建了一个错误报告：issuetracker.google.com/issues/177799274
@Elye 看看我的answer

标签： android-jetpack-compose android-jetpack-compose-scaffold

【解决方案1】：

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

例如

 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 获得圆角

【讨论】：

可能是目前最好的解决方案，直到希望将用于修改抽屉宽度的属性添加到 Scaffold。我唯一担心的是，如果在 Composable 函数中创建 Shape 会导致速度变慢。我已经测试过上面的代码可以工作，但还没有在真实的应用程序中对其进行分析。
@kabumere 我认为这不会减慢应用程序的速度，因为在内部，各种可组合功能使用 Material 形状（包括默认的 drawerShape 此处；我会检查我的电脑并获取实际形状) 这实际上是类似于我提供的功能。尽管如此，您始终可以将customShape 设为val 而不是fun，这样Shape 对象将被创建一次
是的，我的是一个可组合函数内部的 val。我刚开始使用 Compose，所以我想我仍然在思考在重组过程中什么会被重新调用，什么不会。
如果你想让抽屉变小，这个工作。但如果你想让它更大（例如：全屏宽度）。抽屉看起来更大，但内容仍然有限。一切都被截断了。有人知道如何解决这个问题吗？
@BigDan 这取决于您用作drawerContent 的布局。您应该修改该可组合的属性以扩展它

【解决方案2】：

Scaffold(
      topBar = {
          topBar()
      },
      scaffoldState = scaffoldState,
      drawerContent = {
          drawer()
      },
      drawerGesturesEnabled = true
  ) { innerPadding ->
      NavigationHost(navController = navController)
  }
}

【讨论】：

【解决方案3】：

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

类似这样的：

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

【讨论】：

它不起作用:(。这只是设置抽屉内的内容宽度。抽屉宽度仍然相同。
@Elye 对啊，可能不要直接用Scaffold，而是直接用ModalDrawerLayout，这样你就可以用它的modifier
@ CyrilFind，它不适用于模态抽屉。模态抽屉代表整个屏幕以及导航菜单，而不仅仅是导航菜单。