Jetpack Compose：如何修改 ModalNavigationDrawer 中 Drawer 的宽度？

Question

最近，我一直在尝试将 Material3 与 Jetpack Compose 结合使用，并且我的一个屏幕中需要一个抽屉和一个支架。遗憾的是ScaffoldMaterial3中还没有支持抽屉，但幸运的是ModalNavigationDrawer可以找到替代品。但是，使用 ModalNavigationDrawer 时，抽屉打开时抽屉的内容始终覆盖整个屏幕，并且我找不到任何参数将其宽度设置为正确的值，例如屏幕宽度的一半。我有什么办法可以解决这个问题吗？我的 compose 版本是1.2.0-beta02，material3 版本是1.0.0-alpha12。

Answer 1

ModalDrawerSheet在 中使用 a drawerContent，然后将其修饰符设置为所需的宽度：

ModalNavigationDrawer(
   drawerState = drawerState,
   drawerContent = {
      ModalDrawerSheet(
         modifier = Modifier
             .width(300.dp)    // or your desired width
             .fillMaxHeight()
      ) {

         ...Your Drawer Content...

      }
   }
) 

Material3 开发人员页面 和ModalDrawerSheet文档上的代码示例

Answer 2

从ModalNavigationDrawer的源代码中，最大宽度在修饰符中设置，抽屉内容的列设置为填充最大尺寸，因此默认情况下它将采用NavigationDrawerTokens.ContainerWidth的值作为宽度。

但这里存在一个解决方法，您可以做的是您需要设置drawerContainerColor为Color.Transparent并将另一个列或框放入drawerContent您所需的大小。

您可以使用requiredWidth修饰符来固定所需的宽度，也可以sizeIn根据最小和最大宽度使用修饰符。

ModalNavigationDrawer(
        drawerContent = {
            Column(
                modifier = Modifier
                    .requiredWidth(250.dp)
                    .fillMaxHeight()
                    .background(Color.White, RoundedCornerShape(topEnd = 16.dp, bottomEnd = 16.dp))
            ) {
                //Drawer Content
            }
        },
        drawerContainerColor = Color.Transparent
    ) {
        //Main Content
    }

点击背景即可关闭抽屉进行更新 -

如果您想对 Spacer 的可点击产生连锁反应，只需删除交互源和指示参数即可。

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()

ModalNavigationDrawer(
   drawerState = drawerState,
   drawerContent = {
        Row(modifier = Modifier.fillMaxWidth()) {
                Column(
                    modifier = Modifier
                        .requiredWidth(250.dp)
                        .fillMaxHeight()
                        .background(
                            Color.White,
                            RoundedCornerShape(topEnd = 16.dp, bottomEnd = 16.dp)
                        )
                ) {
                    //Drawer Content
                }
                Spacer(
                    modifier = Modifier
                        .fillMaxSize()
                        .clickable(
                            interactionSource = MutableInteractionSource(),
                            indication = null
                        ) {
                            scope.launch {
                                if (drawerState.isOpen) {
                                    drawerState.close()
                                }
                            }
                        },
                )
            }
        },
        drawerContainerColor = Color.Transparent
    ) {
        //Main Content
    }