Jetpack Compose中如何设置Scaffold抽屉占满最大宽度？

你尝试通过自定义drawerShape加宽抽屉的方式，其实只修改了抽屉的裁剪外形，并没有改变抽屉的实际布局宽度，所以内容区域不会填充你扩展的宽度，导致看不到预期效果。下面是两种可行的解决方案：

方案一：使用Material 3的drawerWidth参数（推荐） #

如果你的项目使用Jetpack Compose Material 3，Scaffold直接提供了drawerWidth参数，可直接设置抽屉宽度：

Scaffold(
    drawerContent = { 
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight()
                .background(Color.Red)
        ) {
            Text("Drawer Content")
        }
    },
    drawerWidth = 300.dp // 替换为你需要的宽度值
) { paddingValues ->
    // 主内容区域
}

方案二：Material 2下的自定义宽度实现 #

如果使用Material 2，Scaffold没有直接的drawerWidth参数，你可以给drawerContent设置固定宽度，配合drawerShape确保裁剪范围匹配：

val drawerWidth = 300.dp
val scaffoldState = rememberScaffoldState()

Scaffold(
    scaffoldState = scaffoldState,
    drawerShape = RectangleShape,
    drawerContent = {
        Box(
            modifier = Modifier
                .width(drawerWidth)
                .fillMaxHeight()
                .background(Color.Red)
        ) {
            Text("Drawer Content")
        }
    }
) {
    // 主内容区域
}

原有方法不生效的原因 #

你自定义的Shape中size.width+150是基于系统默认抽屉宽度扩展裁剪区域，但抽屉的实际布局宽度还是默认值，所以fillMaxWidth()只会填充默认宽度，红色背景无法覆盖你扩展的额外区域，因此看不到宽度增加的效果。

内容的提问来源于stack exchange，提问作者Kawan MC