flutter中的几种图片加载方式

最新推荐文章于 2025-03-19 11:27:21 发布

julystroy

最新推荐文章于 2025-03-19 11:27:21 发布

阅读量6.1k

点赞数 1

分类专栏： flutter 文章标签： flutter image

本文链接：https://blog.csdn.net/julystroy/article/details/88692993

版权

flutter 专栏收录该内容

27 篇文章

订阅专栏

博客介绍了Flutter中图片加载的相关内容，包括本地图片和网络图片的加载方式，网络图片可加载GIF，还有默认占位图、淡入效果等。同时提到了图片缓存，还列举了图片加载共同拥有的相关属性，如alignment、color等。

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

图片加载对应的有本地和网络之别，其中囊括了原生和插件，现在介绍点常用的：

本地图片加载：new Image.asset("images/tupian.png")
全路径填写，并在pubspec.yaml文件中注册
网络图片加载：new Image.network( “https://cssccs”,fit: BoxFit.fill,width: 70,)
可以加载GIF
网络图片加载：FadeInImage.memoryNetwork有默认占位图和淡入效果
https://pub.dartlang.org/packages/transparent_image


FadeInImage.memoryNetwork(
            image: 'https://xxx/lake.jpg',
            placeholder: kTransparentImage/* 透明图片 */,）

网络图片加载：FadeInImage.assetNetwork 用本地图做占位图

FadeInImage.assetNetwork(
        image: 'https://xxx/lake.jpg',
        placeholder: 'images/birds.gif' /* 指定gif */,)),
    );

图片缓存：cached_network_image
https://pub.dartlang.org/packages/cached_network_image

new CachedNetworkImage(
        fit: BoxFit.fill,
        width: 30,
        height:40,
        imageUrl:  avatar,
        placeholder: (context, url) => new ProgressView(),
        errorWidget: (context, url, error) => new Icon(Icons.error),
      );

共同拥有的相关部分属性;

alignment → AlignmentGeometry
How to align the image within its bounds
centerSlice → Rect
The center slice for a nine-patch image
color → Color
If non-null, this color is blended with each image pixel using colorBlendMode.
colorBlendMode → BlendMode
Used to combine（组合） color with this image
excludeFromSemantics → bool
Whether to exclude this image from semantics.
filterQuality → FilterQuality
Used to set the FilterQuality of the image
fit → BoxFit
How to inscribe the image into the space allocated during layout
matchTextDirection → bool
Whether to paint the image in the direction of the TextDirection.
gaplessPlayback → bool
Whether to continue showing the old image (true), or briefly show nothing (false), when the image provider changes
image → ImageProvider
The image to display.
repeat → ImageRepeat
. How to paint any portions(边缘) of the layout bounds not covered by the image.
semanticLabel → String
A Semantic description of the image.
width、height → double