StarAndroid

Appearance

原生加载 ​

本地图片 ​

本地图片的存放位置，并且需要在pub文件下配置，注意缩进。添加后重新运行项目才会加载静态资源，热更新检测不到新添加的静态资源 image.png

dart
const Image(image: AssetImage('images/cat.jpg',))

网络图片 ​

dart
Image.network(
  imageUrl,
  fit: BoxFit.fill,
  width: 300.h,
  height: 300.h,
),

圆形图片 ​

dart
const CircleAvatar(backgroundImage: AssetImage("images/cat.jpg"),radius: 50,)

占位图 ​

java
FadeInImage(
  placeholder: const AssetImage('images/cat.jpg'),
  image: NetworkImage(imageUrl)),

三方加载库 ​

Image.network是Flutter核心库提供的一个构造函数，用于直接加载网络图片。它可以从给定的URL加载图片，并将其显示在应用程序的界面上。但是，Image.network没有内置的缓存机制，因此每次使用时都会重新下载图片，这可能会导致性能问题。 cached_network_image是一个第三方插件，它提供了更高级的网络图片加载和缓存功能。它不仅可以加载网络图片，还可以将其缓存到本地文件系统中，以便在后续的加载请求中快速获取。这样可以节省网络带宽和加载时间，并提升应用程序的性能。 pubdev地址：https://pub.dev/packages/cached_network_image

引入依赖 ​

java
cached_network_image: ^3.3.0

基本使用 ​

默认使用 ​

dart
CachedNetworkImage(imageUrl: imageUrl),

带占位图 ​

java
CachedNetworkImage(
    imageUrl:imageUrl,
    placeholder: (context, url) => const CircularProgressIndicator(),
    errorWidget: (context, url, error) => const Icon(Icons.error),
),

带加载指示组件 ​

java
CachedNetworkImage(
    imageUrl: imageUrl,
    progressIndicatorBuilder: (context, url, downloadProgress) =>
        CircularProgressIndicator(value: downloadProgress.progress),
    errorWidget: (context, url, error) => const Icon(Icons.error),
  ),

装饰图片 ​

java
CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,),
      borderRadius: const BorderRadius.all(Radius.circular(6)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

缓存地址 ​

cached_network_image插件会将图片缓存在应用程序的缓存目录中。具体来说，它会将缓存文件存储在设备的本地文件系统中的应用程序缓存目录中。在Android设备上，缓存目录通常是/data/data/<应用程序包名>/cache，而在iOS设备上，缓存目录通常是Library/Caches/<应用程序包名>/。cached_network_image插件会自动管理缓存文件的创建、读取和删除，使得我们可以方便地使用缓存功能，提高图片加载的效率和性能 image.png