Flutter中使用BoxFit.cover时如何显示图片顶部而非中部？

默认情况下，Image组件使用Alignment.center作为对齐基准，搭配BoxFit.cover时会裁剪图片上下部分仅保留中间区域。要让图片显示顶部内容，只需给Image.network添加alignment参数，指定顶部对齐即可：

修改后的代码：

Container(
  height: 200,
  width: double.infinity,
  child: Image.network(
    appointment.imageUrl!,
    fit: BoxFit.cover,
    alignment: Alignment.topCenter, // 关键：设置顶部居中对齐
  ),
),

如果需要图片顶部左对齐或右对齐，可以分别替换为Alignment.topLeft或Alignment.topRight。

原理说明：

• BoxFit.cover的作用是将图片等比缩放至完全覆盖容器，超出容器的部分会被裁剪
• alignment属性决定了图片在容器内的对齐基准，设置为顶部对齐后，裁剪操作会从图片底部开始执行，从而保留顶部区域显示

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