3.Flutter-基础组件(图片及ICON)

3.1 图片

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

1.ImageProvider

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

2.Image

Image widget 有一个必选的image参数,它对应一个 ImageProvider。下面我们分别演示一下如何从 asset 和网络加载图片

 (1) 从asset中加载图片

     1.在工程根目录下创建一个images目录,并将图片 avatar.png 拷贝到该目录。

     2.在pubspec.yaml中的flutter部分添加如下内容:

asset方式在yaml中的配置

注意: 由于 yaml 文件对缩进严格,所以必须严格按照每一层两个空格的方式进行缩进,此处 assets 前面应有两个空格。

   3. 加载该图片

Image组件的使用方式和效果图

Image也提供了一个快捷的构造函数Image.asset用于从asset中加载、显示图片:


Image.asset快捷使用方式和效果图

 (2) 从网络加载图片

Image组件中 NetworkImage加载方式和效果图

Image也提供了一个快捷的构造函数Image.network用于从网络加载、显示图片:


Image.network快捷方式

(3)参数

Image在显示图片时定义了一系列参数,通过这些参数我们可以控制图片的显示外观、大小、混合效果等。我们看一下 Image 的主要参数:

Image组件类的参数

width、height:用于设置图片的宽、高,当不指定宽高时,图片会根据当前父容器的限制,尽可能的显示其原始大小,如果只设置width、height的其中一个,那么另一个属性默认会按比例缩放,但可以通过下面介绍的fit属性来指定适应规则。

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

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

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

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

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

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

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

效果图

Image fit效果图

代码

fit BoxFit相关属性代码

3.Image缓存

Flutter框架对加载过的图片是有缓存的(内存。具有的使用方法如下图

Image常见文件获取途径

3.2 ICON

     ICON

      Flutter 中,可以像Web开发一样使用 iconfont,iconfont 即“字体图标”,它是将图标做成字体文件,然后通过指定不同的字符而显示不同的图片;

在字体文件中,每一个字符都对应一个位码,而每一个位码对应一个显示字形,不同的字体就是指字形不同,即字符对应的字形是不同的。而在iconfont中,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标。

在Flutter开发中,iconfont和图片相比有如下优势:

  1.体积小:可以减小安装包大小。

  2.矢量的:iconfont都是矢量图标,放大不会影响其清晰度。

  3.可以应用文本样式:可以像文本一样改变字体图标的颜色、大小对齐等。

  4.可以通过TextSpan和文本混用。


1. 使用Material Design字体图标

在yaml文件内默认开启使用Material Design字体

Material Design所有图标可以在其官网查看:https://material.io/tools/icons/

我们看一个简单的例子:

text为icon的位码


text为icon的位码效果图

通过这个示例可以看到,使用图标就像使用文本一样,但是这种方式需要我们提供每个图标的码点,这并对开发者不友好,所以,Flutter封装了IconData和Icon来专门显示字体图标,上面的例子也可以用如下方式实现:

Icons类中包含了所有Material Design图标的IconData静态变量定义

2. 使用自定义图标

    我们也可以使用自定义字体图标。iconfont.cn上有很多字体图标素材,我们可以选择自己需要的图标打包下载后,会生成一些不同格式的字体文件,在Flutter中,我们使用ttf格式即可。

假设我们项目中需要使用一个书籍图标和微信图标,我们打包下载后导入:

1.导入字体图标文件;这一步和导入字体文件相同,假设我们的字体图标文件保存在项目根目录下,路径为"assets/fonts/iconfont.ttf":


iconfont字体图标位置
yaml中配置自定义字体

2.为了使用方便,我们定义一个MyIcons类,功能和Icons类一样:将字体文件中的所有图标都定义成静态变量:

自定义一个MyIcon的类和Icons类一样

注意:其中fontFamily的值'myIcon'就是我们刚才声明的新字体,但是代码中的0xebe数值是哪来的呢?再次打开之前下载解压之后的文件夹,其中有一个demo_index.html文件,在浏览器中打开它我们可以看到下面的画面:

自定义图标对应的UniCode

3.使用

使用自定义MyIcons类中的图标

效果如下:


引用自定义图标效果
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

相关阅读更多精彩内容

友情链接更多精彩内容