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

【问题标题】：Jetpack Compose: How to modify the width of Drawer in ModalNavigationDrawer?Jetpack Compose：如何在 ModalNavigationDrawer 中修改 Drawer 的宽度？
【发布时间】：2022-08-03 00:41:27
【问题描述】：

最近我一直在尝试将 Material3 与 Jetpack Compose 结合使用，我需要一个抽屉和一个脚手架在我的一个屏幕上。遗憾的是material3中的Scaffold还没有支持drawer，幸好可以找到ModalNavigationDrawer作为替代。但是，使用 ModalNavigationDrawer，当抽屉打开时，抽屉的内容总是覆盖整个屏幕，我找不到任何参数来将它的宽度设置为适当的值，例如屏幕宽度的一半。有什么办法可以解决这个问题吗？我的作曲版本是1.2.0-beta02我的material3版本是1.0.0-alpha12.

stackoverflow.com/questions/65305734/… 带有大纲的解决方案

标签： android android-jetpack-compose

【解决方案1】：

从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 的可点击产生涟漪效应，只需删除interactionSource 和indication 参数。

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
    }

【讨论】：

它运作良好，非常感谢。虽然这个变通办法已经很厉害了，但是由于透明部分其实还是属于drawerContent的，所以不能像以前那样通过点击“抽屉外”来关闭抽屉，这可能会让用户感到奇怪。你能提供一些额外的建议吗？或者只是当前版本的 ModalNavigationDrawer 无法实现？
@Eynnzerr 我已经通过点击关闭背景更新了答案。

【解决方案2】：

我稍微调整了@Priyank-Jain 的答案，以清理原始抽屉留下的高度。从原始绘图中删除立面并将其添加到新创建的

val scope = rememberCoroutineScope()

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

【讨论】：