flutter 学习（一）Image 组件

Image.asset 加载本地图片的时候如下：

Image.asset(
            "assets/images/sakura.jpg",
            width: width,
            fit: BoxFit.fitHeight,
          ),

图片的目录应该在pubspec.yaml 文件中 设置

 assets:
    - assets/images/

如果是这种的需要在文件中声明

assets:
    - images/logo.png
    - images/2.0x/logo.png
    - images/3.0x/logo.png

代码使用如下

new Image.asset('images/logo.png')

Image.network
加载网络图片

Image.file
加载本地file图片

new Image.network('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg')

有的时候我们需要使用一个占位图或者图片加载出错时显示某张特定的图片，这时候需要用到 FadeInImage 这个组件（这个组件是不可以设置加载出错显示的图片）：
有两种方式使用:
第一种 本地图片当做占位图

new FadeInImage.assetNetwork(
  placeholder: 'images/logo.png',
  image: imageUrl,
  width: 120,
  fit: BoxFit.fitWidth,
)

第二种 透明图片当做占位图

new FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: imageUrl,
  width: 120,
  fit: BoxFit.fitWidth,
)

加载出错显示可以使用第三方 package 的 CachedNetworkImage 组件：

new CachedNetworkImage(
  width: 120,
  fit: BoxFit.fitWidth,
  placeholder: new CircularProgressIndicator(),
  imageUrl: imageUrl,
  errorWidget: new Icon(Icons.error),
)

Image.memory
用来将一个 byte 数组加载成图片，用法如下：

new Image.memory(bytes)

Text组件的API
API名称 功能

width & height	用来指定显示图片区域的宽高（并非图片的宽高）
fit	设置图片填充，类似于Android中的ScaleType
color & colorBlendMode	这两个属性需要配合使用，就是颜色和图片混合，就类似于Android中的Xfermode
alignment	用来控制图片摆放的位置
repeat	用来设置图片重复显示（repeat-x水平重复，repeat-y垂直重复，repeat两个方向都重复，no-repeat默认情况不重复）
centerSlice	设置图片内部拉伸，相当于在图片内部设置了一个.9图，但是需要注意的是，要在显示图片的大小大于原图的情况下才可以使用这个属性，要不然会报错
matchTextDirection	这个需要配合Directionality进行使用
gaplessPlayback	当图片发生改变之后，重新加载图片过程中的样式（1、原图片保留）

fit 属性中有很多值可以设置：

属性名称 样式

BoxFit.contain	全图居中显示但不充满，显示原比例
BoxFit.cover	图片可能拉伸，也可能裁剪，但是充满容器
BoxFit.fill	全图显示且填充满，图片可能会拉伸
BoxFit.fitHeight	图片可能拉伸，可能裁剪，高度充满
BoxFit.fitWidth	图片可能拉伸，可能裁剪，宽度充满
BoxFit.scaleDown	效果和contain差不多， 但是只能缩小图片，不能放大图片

图片设置圆角

使用裁剪来实现图片圆角：

new ClipRRect(
  child: Image.network(
    imageUrl,
    scale: 8.5,
    fit: BoxFit.cover,
  ),
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20),
    topRight: Radius.circular(20),
  ),
)

使用边框来实现图片圆角：

new Container(
  width: 120,
  height: 60,
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(10.0),
    image: DecorationImage(
        image: NetworkImage(imageUrl),
        fit: BoxFit.cover),
  ),
)

全屏显示

width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,