1、Image Widget详解

最新推荐文章于 2024-03-19 15:52:30 发布

piplab666

最新推荐文章于 2024-03-19 15:52:30 发布

阅读量120

点赞数

分类专栏： Flutter Widget 属性详解文章标签： flutter

本文链接：https://blog.csdn.net/qq_31556299/article/details/132377683

版权

Flutter Widget 属性详解专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、属性概要

Flutter中的Image小部件用于显示图像，可以从本地资源、网络或内存中的数据源加载图像。以下是一些常用的Image小部件属性及其作用：

image: 这是最重要的属性之一，用于指定要显示的图像。可以是一个AssetImage、NetworkImage、MemoryImage等等。
fit: 定义图像在小部件中的适应方式。常见的值包括：
- BoxFit.contain: 图像等比例缩放以适应小部件，尽可能大但不会超出小部件范围。
- BoxFit.cover: 图像等比例缩放以填充小部件，可能会超出小部件范围。
- BoxFit.fill: 图像拉伸以填充小部件，可能导致图像变形。
- BoxFit.fitWidth: 图像等比例缩放以适应小部件的宽度。
- BoxFit.fitHeight: 图像等比例缩放以适应小部件的高度。
alignment: 定义图像在小部件内的对齐方式。可以使用Alignment类的常量，例如Alignment.center、Alignment.topLeft等。
repeat: 如果图像比小部件大，可以通过设置ImageRepeat来定义图像的平铺方式，以填充小部件。
color: 设置颜色，将其与图像混合。可以用来给图像添加一层颜色滤镜效果。
colorBlendMode: 指定color属性与图像的混合模式，例如BlendMode.srcIn。
width和height: 指定图像显示的宽度和高度，如果未设置，将使用图像的原始大小。
scale: 指定图像的缩放比例。默认值为1.0。
semanticLabel: 用于提供辅助功能的文本标签，描述图像内容。
frameBuilder: 自定义帧加载的构建函数，可以在加载不同阶段显示不同的小部件，例如加载中、加载错误等。
loadingBuilder: 在图像加载过程中显示的小部件，通常用于显示加载指示器。
errorBuilder: 在图像加载出错时显示的小部件，可以显示错误信息或其他替代内容。
excludeFromSemantics: 布尔值，指示是否将图像排除在语义中，即是否忽略辅助功能。
filterQuality: 图像的过滤质量，影响图像缩放时的呈现质量。常见值包括FilterQuality.low、FilterQuality.medium和FilterQuality.high。
centerSlice：用于指定一个图像的中心区域，这个区域会在图像调整大小时保持不变，而其余部分则会被拉伸或缩放。对于创建可以动态调整大小的可拉伸图像非常有用，例如聊天气泡、可拉伸的背景等
gaplessPlayback：用于控制当图像发生变化时是否在无缝状态下播放。具体来说，当你在切换 Image 小部件的图像时，如果将 gaplessPlayback 设置为 true，则新图像将在旧图像消失之前无缝地显示，避免了闪烁或空白的情况
isAntiAlias：用于控制图像的抗锯齿效果。抗锯齿是一种图像处理技术，旨在减少图像边缘处的锯齿状走样效果，从而使图像边缘更加平滑。抗锯齿会消耗一些性能，因为在绘制过程中需要进行额外的计算。如果你希望图像的边缘更加平滑，可以考虑启用抗锯齿

二、常见用法

Flutter中的Image小部件用于显示图像，可以从本地资源、网络或内存中的数据源加载图像。以下是一些Image小部件的常见用法和示例：

从本地资源加载图像：
这是最常见的用法之一，您可以使用AssetImage来从应用程序的资源中加载图像。

Image.asset('assets/image.png')

从网络加载图像：
使用NetworkImage可以从指定的URL加载图像。

Image.network('https://example.com/image.png')

设置图像宽高：
您可以使用width和height属性来设置图像的宽度和高度。

Image.asset(
  'assets/image.png',
  width: 100,
  height: 100,
)

调整图像适应方式：
使用fit属性可以调整图像在容器中的适应方式。

Image.asset(
  'assets/image.png',
  width: 200,
  height: 150,
  fit: BoxFit.cover, // 填充并裁剪以适应容器
)

添加颜色滤镜效果：
您可以使用color和colorBlendMode属性来给图像添加颜色滤镜效果。

Image.asset(
  'assets/image.png',
  color: Colors.blue, // 添加蓝色滤镜
  colorBlendMode: BlendMode.colorBurn, // 混合模式
)

加载指示器和错误处理：
使用loadingBuilder和errorBuilder属性来自定义加载和错误时的显示内容。

Image.network(
  'https://example.com/image.png',
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    if (loadingProgress == null) {
      return child;
    } else {
      return CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
            : null,
      );
    }
  },
  errorBuilder: (BuildContext context, Object error, StackTrace stackTrace) {
    return Text('Image Load Failed');
  },
)

本地内存中加载图像：
使用MemoryImage可以从内存中加载图像数据。

Uint8List imageBytes = ... // 图像数据字节
Image.memory(imageBytes)

这些示例涵盖了Image小部件的一些常见用法。根据您的应用需求，您可以灵活地使用不同的属性和方法来实现所需的图像显示效果。

三、生僻知识点

colorBlendMode用于指定将color属性与图像进行混合的模式。这个属性可以为图像添加颜色滤镜效果，从而改变图像的外观。颜色混合模式是一个决定如何将颜色应用于图像像素的算法。

颜色混合模式使用BlendMode枚举来指定，这个枚举包含了许多不同的混合模式。以下是一些常用的BlendMode值及其作用：

BlendMode.src: 将颜色应用于图像像素，覆盖原始像素的颜色。
BlendMode.srcIn: 将颜色与图像像素的alpha通道相乘，改变图像的颜色和透明度。
BlendMode.srcOut: 将颜色与图像像素的alpha通道相乘，并反转结果。通常用于创建遮罩效果。
BlendMode.dst: 将颜色应用于背景像素，不影响图像的颜色。
BlendMode.dstIn: 将颜色与背景像素的alpha通道相乘，改变背景的颜色和透明度。
BlendMode.dstOut: 将颜色与背景像素的alpha通道相乘，并反转结果。通常用于创建遮罩效果。
BlendMode.overlay: 根据颜色的亮度调整图像像素的颜色，产生一种叠加效果。
BlendMode.multiply: 将颜色与图像像素的颜色进行相乘，改变图像的颜色。
BlendMode.screen: 将颜色与图像像素的反色相乘，产生一种屏幕效果。
BlendMode.colorBurn: 根据颜色的亮度调整图像像素的颜色，产生颜色加深效果。
BlendMode.colorDodge: 根据颜色的亮度调整图像像素的颜色，产生颜色减淡效果。

等等…

使用colorBlendMode属性，您可以根据需要为图像添加各种不同的颜色效果，从而创造出独特的视觉效果。例如，您可以使用BlendMode.color将图像变成单一颜色，或者使用其他混合模式来产生更加复杂的效果。这对于创造各种风格的图像、按钮和图标效果都非常有用。

四、三大builder

当使用Image小部件加载图像时，可以通过frameBuilder、loadingBuilder和errorBuilder属性来自定义加载不同阶段的显示内容。

这些属性允许您在加载过程中显示不同的小部件，从而提供更好的用户体验。下面是每个属性的简单示例：

1. frameBuilder:
frameBuilder属性允许您在每个图像帧加载时自定义显示的内容。这在需要实时显示加载进度或动画效果时非常有用。

Image(
  image: AssetImage('assets/image.png'),
  frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
    if (wasSynchronouslyLoaded) {
      // 图像同步加载完成时的显示内容
      return child;
    } else {
      // 图像异步加载中的显示内容，可以根据帧数显示加载进度等
      return Center(
        child: CircularProgressIndicator(),
      );
    }
  },
)

2. loadingBuilder:
loadingBuilder属性允许您在图像加载过程中显示自定义的小部件，通常用于显示加载指示器。

Image(
  image: NetworkImage('https://example.com/image.png'),
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    if (loadingProgress == null) {
      return child;
    } else {
      // 显示加载指示器和进度信息
      return Center(
        child: CircularProgressIndicator(
          value: loadingProgress.expectedTotalBytes != null
              ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
              : null,
        ),
      );
    }
  },
)

3. errorBuilder:
errorBuilder属性允许您在图像加载出错时显示自定义的小部件，例如显示错误信息或替代图像。

Image(
  image: NetworkImage('https://example.com/non_existing_image.png'),
  errorBuilder: (BuildContext context, Object error, StackTrace stackTrace) {
    return Center(
      child: Text('Image Load Failed'),
    );
  },
)

这些示例演示了如何使用frameBuilder、loadingBuilder和errorBuilder属性来在不同的加载阶段显示不同的内容，以提供更好的用户反馈和体验。您可以根据自己的需求进一步自定义这些内容。

五、`frameBuilder` 和 `loadingBuilder`的区别

frameBuilder 和 loadingBuilder 都是用于自定义 Image 小部件加载过程中的不同阶段的显示内容。虽然它们的目的相似，但它们在使用方式和时机上有一些区别。

frameBuilder:

frameBuilder 是一个回调函数，它接受四个参数：BuildContext context、Widget child、int frame 和 bool wasSynchronouslyLoaded。
在图像加载过程中的每一帧，都会调用 frameBuilder，并根据加载的状态返回不同的小部件。这可以让你根据加载进度或同步加载状态来展示不同的内容。
通常用于在加载过程中提供更多的反馈，例如在加载开始时显示加载指示符，然后在加载完成时切换到实际的图像。

loadingBuilder:

loadingBuilder 是一个回调函数，它只接受一个参数：BuildContext context。
在图像加载过程中，只要加载状态为加载中，就会调用 loadingBuilder。你可以在这个回调中返回一个小部件，用于展示加载中的内容，比如加载指示符。
当图像加载完成后，不再调用 loadingBuilder。相反，会直接显示实际的图像。

总的来说，frameBuilder 提供了更细粒度的控制，允许你在每一帧加载时都有不同的显示内容。而 loadingBuilder 则更专注于加载过程中的整体状态，只需要提供加载中的显示内容。

以下是一个简单的比较示例：

Image(
  image: NetworkImage('https://example.com/image.jpg'),
  frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
    // 根据不同的帧和同步加载状态返回不同的小部件
    // 在图像加载完成后，直接显示实际图像
  },
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    // 只在加载过程中调用，根据加载状态显示加载指示符等
  },
)