Image
flutter
Flutter
发布日期:   2019-02-22
文章字数:   443
阅读时长:   1 分
阅读次数:  

介绍

Image, 图片显示Widget, 和Android ImageView相似，但是从实际使用的方法上看，与常用的图片加载库，如Picasso，Glide等相似，支持本地图片，资源图片，网络图片等加载方式。

类结构

构造方法

方式 解释
Image() 通用方法，使用ImageProvider实现，如下方法本质上也是使用的这个方法
Image.asset 加载资源图片
Image.file 加载本地图片文件
Image.network 加载网络图片
Image.memory 加载Uint8List资源图片

属性

image

抽象类，需要自己实现获取图片数据的操作

常用ImageProvider

  • ExactAssetImage
  • AssetImage
  • NetworkImage
  • FileImage
  • MemoryImage

width & height

显示区域的宽和高。

fit

显示形式

  • BoxFit.fill 全图显示，拉伸、充满
  • BoxFit.contain 原比例全图显示
  • BoxFit.cover 拉伸、裁剪、充满
  • BoxFit.fitWidth 宽度充满
  • BoxFit.fitHeight 高度充满
  • BoxFit.scaleDown 类似contain，但是不允许显示超过源图片大小，可变小，不可变大
  • BoxFit.none 原图显示

color & colorBlendMode

混合模式，配合使用

alignment

控制图片的摆放位置

repeat

重复显示

  • ImageRepeat.repeat X、Y方向都重复显示
  • ImageRepeat.repeatX 横向重复
  • ImageRepeat.repeatY 竖向重复
  • ImageRepeat.none 不重复

centerSlice

当图片被拉伸时，centerSlice定义的区域会被拉升

Image image = Image.asset(
    'image/14v.png',
    width: 300.0,
    height: 300.0,
    fit: BoxFit.contain,
    centerSlice: Rect.fromCircle(
        center: const Offset(100.0,100.0),
        radius: 10.0,
    ),
)
assert(sourceSize == inputSize, 'centerSlice was used with a BoxFit that does not guarantee that the image is fully visible.');

* 当显示比例小于原图片大小时，会报错！

matchTextDirection

与 Directionality 配合使用

gaplessPlayback

当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。若值为true，保留，若为false，不保留，直接空白等待下一张图片加载。

 上一篇
Scaffold Scaffold
Material 介绍Material Design （质感设计）是由Google推出的全新设计语言，旨在为手机、平板电脑、台式机和其他平台提供更一致、更广泛的外观和感觉。从2014年开始，Android到衍生的Android Wear、A
2019-02-22 Flutter
flutter
下一篇 
第一个Flutter应用 第一个Flutter应用
使用 package在这一步中，你将开始使用一个名为 english_words 的开源软件包，其中包含数千个最常用的英文单词以及一些实用功能。 你可以 在 pub.dartlang.org 上找到 english_words 软件包以及其
2019-02-19 Flutter
flutter
  目录