Flutter基础控件--Image

Flutter中的Image控件和Android中的ImageView效果一样,用来展示图片,不过Flutter中的Image更像Glide,能够从网络、文件、内存中加载图片。
Image构造方法有:

方法 说明
Image() 从ImageProvider获取图片
Image.asset() 从AssetBundle获取图片,具体实现类为AssetImage
Image.file() 从File中获取图片,具体实现类为FileImage
Image.network() 从网络获取图片,具体实现类为NetworkImage
Image.memory() 从Uint8List中显示图片,具体实现类为MemoryImage

Image构造函数如下:

 const Image({
    Key key,
    @required this.image,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  }) : assert(image != null),
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       super(key: key);

常用属性如下:

属性 说明
width Image控件宽度,主意还是控件宽度,不是图片宽度
height Image控件高度,不是图片高度
color 和colorBlendMode一起使用,和图片的每个像素混合
colorBlendMode 混合模式
fit 填充方式,有点像Android ImageView的scaleType,fill:显示整张图片,拉伸填充全部可显示区。contain显示整张图片,按照原始比例缩放显示,居中显示。cover:按照原始比例缩放,可能裁剪,填满可显示区域,居中显示。 fitWidth:按照原始比例缩放,可能裁剪,宽度优先填满。fitHeight:按照原始比例缩放,可能裁剪,高度优先填满。none:图片居中显示,不缩放原图,可能被裁剪。scaleDown:显示整张图片,只能缩小或者原图显示。
repeart 重合方式,repeat在x和y方向上重复图像,直到填充框。repeatX在x方向上重复图像,直到水平填充框。repeatY在y方向重复图像,直到垂直填充框。noRepeat将盒子的未覆盖部分保持透明
centerSlice 传入一个Rect,生成一个和Android中的.9一样效果的图片

各种Image使用
Image.asset()
Image.asset()使用前需要在pubspec.yaml文件中声明依赖,pubspec.yaml和Android Studio中Gradle的build.gradle文件相似,pubspec.yaml用于声明Flutter的外部依赖项。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - image/test_icon.jpg

主意- image/test_icon.jpg-和image之间有一个空格,否则会显示不出图片

 new Image.asset(
              'image/test_icon.jpg',
              width: 40,
              height: 40,
            )

Image.file()

new Image.file(
 File('/storage/emulated/0/Download/test.jpg'),
 width: 120,
 fit: BoxFit.fill,
)

Image.network()

 new Image.network(
        'http://pic31.nipic.com/20130711/8952533_164845225000_2.jpg',
        width: 40,
        height: 40,)

你可能感兴趣的:(Flutter基础控件--Image)