flutter学习--Image组件

加入图片的几种方式

Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
Image.memory: 加载Uint8List资源图片
1.Image.asset方法：
首先在项目跟目录新建文件夹assets/images，在images文件夹下添加一张图片,然后在pubspec.yaml文件中配置asset资源，在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:
          - assets/images/你的图片名

配置完成，package get
然后，在代码中使用：

body: Center(
          child: Container(
            child: Image.asset(
              'assets/images/ic_launcher72.png',
              width: 200.0,
              height: 200.0,
              scale: 1.0,
              color: Colors.black,
            ),
            width: 400.0,
            height: 200.0,
            color: Colors.blue,
            alignment: Alignment.center,
          ),
//            child: Image.network("https://i2.hdslb.com/bfs/face/0cca7e53848ebd079e1b55fde929a473a882ee7f.jpg"),
        ),

出现如下图：
flutter学习--Image组件
2.Image.network使用方法

child: Image.network("https://i2.hdslb.com/bfs/face/0cca7e53848ebd079e1b55fde929a473a882ee7f.jpg"),

直接添加图片的url链接
3.Image.file使用方法

child: Image.file(new File("/Users/pengganggui/Documents/idea_project/YiXianTong/src/main/resources/static/image/3333.jpg"))),

在使用File之前，导入

import 'dart:io';

4.Image.memory:使用方法

Image.memory(bytes);

fit属性的设置

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的.

BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain:全图显示，显示原比例，可能会有空隙。
BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

图片的混合模式

图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果也是非常丰富的。

child:new Image.network(
  'http://jspang.com/static/myimg/blogtouxiang.jpg',
    color: Colors.greenAccent,
    colorBlendMode: BlendMode.darken,
),

color：是要混合的颜色，如果你只设置color是没有意义的。
colorBlendMode:是混合模式，相当于我们如何混合。

repeat图片重复

ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX: 横向重复，纵向不重复。
ImageRepeat.repeatY：纵向重复，横向不重复。