Flutter：如何调整Drawer Header图片的尺寸与对齐方式？

解决方案 #

问题根源是DrawerHeader默认会让子组件填充整个头部区域并居中对齐，直接设置Image的width无法生效。可以通过以下两种方式实现需求：

1. 用Align组件控制对齐与尺寸

通过Align强制图片左对齐，同时固定图片尺寸并设置缩放模式：

DrawerHeader(
  padding: EdgeInsets.fromLTRB(16, 16, 16, 16), // 调整内边距适配布局
  child: Align(
    alignment: Alignment.centerLeft, // 设置左对齐
    child: Image.asset(
      'images/logo.png',
      width: 60, // 自定义图片宽度
      height: 60, // 自定义图片高度
      fit: BoxFit.contain, // 保持图片比例，避免拉伸变形
    ),
  ),
)

2. 自定义Drawer头部容器

如果默认DrawerHeader的样式限制过多，直接用Container替代，完全自定义布局：

Container(
  height: 120, // 自定义头部高度
  padding: EdgeInsets.fromLTRB(16, 20, 16, 10),
  child: Image.asset(
    'images/logo.png',
    width: 60,
    fit: BoxFit.contain,
  ),
)

关键提示 #

• Alignment.centerLeft可以突破DrawerHeader的默认居中布局，让图片靠左显示
• fit: BoxFit.contain能保证图片按原始比例缩放，不会变形
• 调整padding可以控制图片与Drawer边缘的间距，优化视觉效果

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