Flutter基础组件之Image

首先看一下Image的主要参数：

const Image({
    Key? key,
    required this.image,  
    this.frameBuilder,
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    his.width, //图片的宽
    this.height, //图片高度
    this.color, //图片的混合色值
    this.colorBlendMode, //混合模式
    this.fit,//缩放模式
    this.alignment = Alignment.center, //对齐方式
    this.repeat = ImageRepeat.noRepeat, //重复方式
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    this.filterQuality = FilterQuality.low,
})

一、应用场景

开发中常用的场景有两种：① 加载本地图片（切图，icon等）②加载网络图片

1、加载assets图片

如下图，首先需要在pubspec.yaml中声明本地资源文件：

引用加载资源文件：

Image.asset(
    "assets/home/home_icon_share.png",
    width: 18,
    height: 18,
    fit: BoxFit.fill,
);

2、加载网络图片

Image.network(
    imageUrl,
    width: 120,
    height: 90,
    fit: BoxFit.cover,
);

二、图片圆角

1、圆角矩形图片

ClipRRect(
    borderRadius: BorderRadius.circular(4),
    child: Image.network(
        imageUrl,
        width: 104,
        height: 78,
        fit: BoxFit.cover,
    ),
);

2、圆形头像

ClipOval(
    child: Image.network(
        avatarUrl,
        width: 64,
        fit: BoxFit.cover,
        errorBuilder: _buildPlaceholder(),
    ),
);

三、遇到的问题

1、设定宽高

官方推荐我们在使用Image组件时，指定图片的宽、高参数或者将Image组件放置在严格布局约束之中，否则图像尺寸将随着图像的加载而改变，这将导致展示效果很差劲。

2、访问不到本地图片

我们按照以下目录结构定义和声明资源：

root
   ...   
   - android
   - assets
     - user
       - icon_avatar.png
       - xxx.png
   ...

使用以下代码加载图片资源时，运行到浏览器是正常显示的，但在Android上运行图片加载失败

Image.asset("user/icon_avatar.png")

错误日志：

When the exception was thrown, this was the stack: 
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:237:7)
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:658:14)
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "images/img_default_news.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#0fcd0(), name: "images/img_default_news.png", scale: 1.0)

发现改写成就好了

Image.asset("assets/user/img_default_news.png")

结论：引用本地资源时需要完整拼接到资源根目录（资源根目录+资源全名）