Flutter长图显示，自定义显示图片的指定区域

最新推荐文章于 2025-04-11 09:48:15 发布

东方睡衣

最新推荐文章于 2025-04-11 09:48:15 发布

阅读量1.2k

点赞数

文章标签： flutter ui android

本文链接：https://blog.csdn.net/web2022050903/article/details/129667389

版权

这篇博客介绍了如何在Flutter中实现长图在定高卡片中显示指定区域的需求。通过自定义裁剪对象，利用canvas的drawImageRect方法处理图片形变，实现对超长图片的指定区域展示。此外，还提供了下载图片数据的方法和组件使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

话不多说，直切正题！我们经常会遇到一个需求，在在一个定高的卡片中显示长图，如下图所示。

假如我们要显示这个长图。如果不考虑自定义显示长图的区域，这个很好实现，没什么可说的。

Container(width: 300,height: 400,decoration: BoxDecoration(border: Border.all(color: Colors.deepOrangeAccent, width: 3)),child: Image.network("https://fb-cdn.fanbook.mobi/fanbook/app/files/chatroom/image/9a61840fbbcf766b15f8601b66b9d63c.jpeg",fit: BoxFit.fitWidth,),
),

关于BoxFit这个枚举，各个具体的枚举值含义，我直接从官方的注释中复制了出来，方便大家查阅。

1.#### BoxFit.fill