Flutter 中 Image 的使用详解(一) | Flutter Widgets

这是我参与更文挑战的第21天，活动详情查看：更文挑战

前言

上篇我们聊了 Image 的 5 种加载方式，这一篇我们将详细聊聊 Image 的各个参数的调配以及展示效果。

我们的约定

由于这篇基本讨论的都是 Image 抽象出来的通用方法，为了实现效果，我们就简单使用 Image.network 做展示示例了。

// 图片 url，参数宽度随时调整
String url =
  'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=375';
// 加载图片
Image.network(url)

常用参数

width、height（宽高）

这里我们在默认缩放方式下聊聊如下 3 种情况

只设置宽度

Image.network(
  url,
  width: 200,
)

宽度尽量填充的满，高度等比缩放

只设置高度

Image.network(
  url,
  height: 200,
)

高度尽量填充的满，宽度等比缩放

设置宽高

// 这里加个背景辅助
Container(
  color: Colors.orange,
  // 展示图片
  child: Image.network(
    url,
    // 设置宽高都 200
    width: 200,
    height: 200,
  ),
)

这里我们设置宽高都一样，但是图片不是一个长方形的，这时就会按照长边去尽量填充满，然后短边等比缩放

长边尽量填充满，短边等比缩放

alignment（对齐）

这里我们将图片设置为 200 的宽度

// 图片 url
String url =
  'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100';
// 辅助背景
Container(
  color: Colors.orange,
  child: Image.network(
    url,
    width: 375,
    height: 375,
    // 设置对齐方式
    alignment: Alignment.center,
  ),
)

这里的 alignment 其实和我们之前聊的都一样

Alignment.topLeft	Alignment.topCenter	Alignment.topRight

Alignment.centerLeft	Alignment.center（默认）	Alignment.centerRight

Alignment.bottomLeft	Alignment.bottomCenter	Alignment.bottomRight

学一技

如果我们要输入 Alignment.bottomCenter 可以输入 alibc

如果修改对齐方式可以直接在 .之后输入 bc

缩放

通常设置宽高也无法满足我们的需求，比如头像就要尽可能小的填充缩放，这时就要通过设置缩放方式来调整啦,就是下面的效果

// 背景
Container(
  color: Colors.orange,
  width: 375,
  height: 375,
  alignment: Alignment.center,
  // 椭圆剪裁
  child: ClipOval(
    // 设置头像
    child: Image.network(
      url,
      width: 100,
      height: 100,
      // 设置缩放
      fit: BoxFit.cover,
    ),
  ),
)

这样一个圆形头像就展示出来了，下面我们一起看看所有的缩放方式展示的效果

缩放方式列表

这里我们还继续使用之前2步的代码

Container(
  color: Colors.orange,
  // 椭圆剪裁
  child: Image.network(
    url,
    width: 375,
    height: 375,
    fit: BoxFit.scaleDown,
  ),
)

BoxFit.scaleDown（默认）图片相对于目标大小：1、不超过，效果为 none 2、超过为 contain	BoxFit.fill（填充宽高，拉伸图片）	BoxFit.contain（尽可能填充宽高，等比缩放）

BoxFit.cover（最小边填充，等比缩放）	BoxFit.fitWidth（填充宽度，等比缩放）	BoxFit.fitHeight（填充高度，等比缩放）

BoxFit.none（图片大小比例都不变，不超过不填充，超过剪裁）	BoxFit.none(100x100)

结合对齐

上面都是默认为居中的方式展示的效果，我们再深入一点结合对齐方式看看效果，这里为了效果，我们使用 BoxFit.cover

Alignment.topLeft	Alignment.center	Alignment.bottomRight

这里可以看出，我们是从左上角到右下角，取了 3 个“镜头”，更多的组合方式我们就不展示了，你可以悟到即可。

颜色混合

colorBlendMode 颜色混合模式是指 Canvas 画布在绘制图像时，使用的混合像素的算法。

使用场景

一般我们是在给图片着色时使用（比如下面的图标），也会在一些滤镜场景下使用。

// 未设置颜色
Image.asset(
  'icon_home_unselect.png'.icon,
)
// 设置蓝色
Image.asset(
  'icon_home_unselect.png'.icon,
  color: Colors.blue,
)

混合模式效果

如果我们直接对图片设置 color 那么会是下面的情况

Container(
  color: Colors.orange,
  // 椭圆剪裁
  child: Image.network(
    url,
    width: 375,
    height: 375,
    fit: BoxFit.contain,
    color: Colors.blue,
    // colorBlendMode: BlendMode.plus,
  ),
)

图片没了，只有蓝色了，这时为什么呢？其实就是颜色混合模式colorBlendMode所导致的，他的默认值是 BlendMode.srcIn ，Skia 自带了 29种混合模式，下面我们就看 3 种效果，其余详细的可以看看Flutter 和 skia 的文档。

BlendMode.color	BlendMode.plus	BlendMode.hue

源码仓库

基于 Flutter 🔥 最新版本

Flutter Widgets 仓库

参考链接

关注专栏

此文章已收录到下面👇 的专栏，可以直接关注
更多文章继续阅读｜系列文章持续更新

👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦