Jetpack Compose 如何调整展开状态下ModalDrawer的尺寸

Compose Material的ModalDrawer默认抽屉宽度遵循Material设计规范，会占屏幕固定比例，要自定义尺寸可通过以下方式修改，方案完全兼容多平台CommonMain模块：

方法1：给抽屉内容根布局设置宽度 #

你只需要在drawerContent的最外层套布局，给它加width相关的Modifier即可，代码修改示例如下：

@Composable // 实际抽屉实现
fun ModalDrawer(drawerState: DrawerState, content: @Composable () -> Unit) {
    ModalDrawer(
        drawerState = drawerState,
        // 自定义抽屉宽度
        drawerContent = {
            Column(
                // 这里可根据需求设置宽度：
                // 1. 固定宽度：.width(200.dp)
                // 2. 占屏幕宽度比例：.fillMaxWidth(0.7f) 表示占屏幕70%宽度
                modifier = Modifier.fillMaxWidth(0.7f).fillMaxHeight()
            ) {
                Text("1234")
                Text("12345")
                // 其他抽屉内容
            }
        },
        content = {
            content()
        },
        gesturesEnabled = drawerState.isOpen
    )
}

如果你用的是Material3的ModalNavigationDrawer，调整逻辑完全一致，仅需给drawerContent的根布局设置宽度即可，适配Android/iOS/Desktop全端。

可选拓展调整 #

如果需要同时调整抽屉圆角等样式，可添加drawerShape参数：

ModalDrawer(
    drawerState = drawerState,
    drawerShape = RoundedCornerShape(topEnd = 16.dp, bottomEnd = 16.dp),
    // 其他参数保持不变
)

内容的提问来源于stack exchange，提问作者Nikola-Milovic