Jetpack Compose中如何设置Scaffold Navigation Drawer的宽度？

问题根源说明 #

1. 你代码中写的drawableShape是拼写错误，正确参数名为drawerShape，该参数仅用于修改抽屉的边缘形状，不会调整抽屉宽度
2. 自定义Shape的方案只会修改裁剪轮廓，不会改变抽屉本身的布局宽度，所以子组件超出裁剪范围的部分会被截断，属于不符合需求的实现方式

正确实现方案 #

方案1：Material3 官方属性配置（推荐）

如果你使用的是Material3版本的Scaffold，官方已经提供了drawerWidth参数直接配置抽屉宽度，无需自定义逻辑：

Scaffold(
    drawerContent = { DrawerCompose(id = id, onChangeEmpNo = onChangeEmpNo) },
    drawerShape = MaterialTheme.shapes.small,
    // 可直接传入固定dp值，也可配合逻辑设置动态宽度
    drawerWidth = 280.dp
) { paddingValues ->
    // 页面主体内容
    Box(modifier = Modifier.padding(paddingValues))
}

方案2：抽屉内容根布局加宽度约束（兼容Material2、Material3）

不管是哪个版本的Scaffold，都可以直接给抽屉内容的根布局设置宽度约束，抽屉容器会自动适配内容的宽度，不会出现裁剪问题：

@Composable
fun DrawerCompose(
    id: String,
    onChangeEmpNo: (String) -> Unit
) {
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    Column(
        // 按屏幕宽度比例设置，比如占2/3屏宽
        modifier = Modifier
            .fillMaxWidth(2/3f)
            .fillMaxHeight()
    ) {
        OutlinedTextField(
            value = id,
            onValueChange = onChangeEmpNo,
            modifier = Modifier.fillMaxWidth()
        )
        // 其他抽屉内容
    }
}

如果需要适配内容宽度，把fillMaxWidth替换为wrapContentWidth()即可。

内容的提问来源于stack exchange，提问作者Polaris Nation