flutter 加载图片资源包含本地和网络资源

本文介绍在Flutter中配置和加载本地与网络资源的方法,包括使用pubspec.yaml配置文件添加资源,通过AssetImage和CachedNetworkImage加载图片,并提供图片适应模式设置。同时,文章还分享了封装的图片工具类,实现图片的缓存和加载。

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

配置资源
1.在pubspec.yaml中的flutter部分添加如下内容:

assets:
    - images/avatar.png

flutter 加载本地资源

new Image.asset("assets/images/wechat.png")

// or
new Image(
  image: new AssetImage("assets/images/wechat.png"),
),

加载网络图片

Image.network(
        model.coverImgUrl,
        fit: BoxFit.cover,
       )

fit设置模式
fit:该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义,它是一个枚举类型,有如下值:

fill:会拉伸填充满显示空间,图片本身长宽比会发生变化,图片会变形。

cover:会按图片的长宽比放大后居中填满显示空间,图片不会变形,超出显示空间部分会被剪裁。

contain:这是图片的默认适应规则,图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间,图片不会变形。

fitWidth:图片的宽度会缩放到显示空间的宽度,高度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。

fitHeight:图片的高度会缩放到显示空间的高度,宽度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。

none:图片没有适应策略,会在显示空间内显示图片,如果图片比显示空间大,则显示空间只会显示图片中间部分。

在这里插入图片描述

如何将加载的过得图片缓存到内存和本地
cached_network_image 缓存网络图片框架

dependencies:
  cached_network_image: ^1.1.3

封装的图片工具类

import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';

import 'package:cached_network_image/cached_network_image.dart';

class ImageUils {
  //获取图片AssetImage
  static ImageProvider getAssetImage(String name, {String format: 'png'}) {
    return AssetImage(getImgPath(name, format: format));
  }

  //获取本地图片路径
  static String getImgPath(String name, {String format: 'png'}) {
    return 'assets/images/$name.$format';
  }

  //缓存图片,利用CachedNetworkImageProvider,这个框架在加载图片的时候
  //会把图片缓存到本地,如果imageUrl是空的,那么就加载默认占位图
  static ImageProvider getImageProvider(String imageUrl,
      {String holderImg: "none"}) {
    if (TextUtil.isEmpty(imageUrl)) {
      return AssetImage(getImgPath(holderImg));
    }
    return CachedNetworkImageProvider(imageUrl);
  }
  
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值