【Flutter 组件】004-基础组件：图片及 ICON

最新推荐文章于 2024-11-20 14:40:14 发布

Web_boom

最新推荐文章于 2024-11-20 14:40:14 发布

阅读量548

点赞数

文章标签： flutter android

本文链接：https://blog.csdn.net/Android_boom/article/details/128398017

版权

本文详细介绍了Flutter中Image组件的使用，包括从asset、网络加载图片，以及ImageProvider的使用。同时，讨论了ICON的优势，如何使用Material Design字体图标和自定义字体图标。通过实例展示了图片和ICON在Flutter应用中的实现。

摘要由CSDN通过智能技术生成

【Flutter 组件】004-基础组件：图片及 ICON

一、图片

1、Image

概述

Flutter 中，我们可以通过 Image 组件来加载并显示图片，Image 的数据源可以是 asset 、文件、内存以及网络。

Image 是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image 的几个构造方法

方法	释义
Image()	从ImageProvider中获取图片，从本质上看，下面的几个方法都是他的具体实现。
Image.asset(String name)	从AssetBundler中获取图片
Image.network(String src)	显示网络图片
Image.file(File file)	从File中获取图片
Image.memory(Uint8List bytes)	从Uint8List中显示图片

常用属性

1.alignment → AlignmentGeometry - 图像边界内对齐图像。
2.centerSlice → Rect - 九片图像的中心切片。
3.color → Color - 该颜色与每个图像像素混合 colorBlendMode。
4.colorBlendMode → BlendMode - 用于 color 与此图像结合使用。
5.fit → BoxFit - 图像在布局中分配的空间。
6.gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。
7.image → ImageProvider - 要显示的图像。
8.matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。
9.repeat → ImageRepeat - 未充分容器时，是否重复图片。
10.height → double - 图像的高度。
11.width → double - 图像的宽度。

ImageProvider

ImageProvider 是一个抽象类，主要定义了图片数据获取的接口 load() ，从不同的数据源获取图片需要实现不同的 ImageProvider ，如 AssetImage 是实现了从 Asset 中加载图片的 ImageProvider，而 NetworkImage 实现了从网络加载图片的 ImageProvider。

ImageProvider 的实现类：