Flutter（三）Image

用于图片显示的Widget，常用类别：

• Image.asset 资源图片
• Image.network 网络图片
• Image.file 本地文件图片
• Image.memory 内存图片

向项目内添加图片

• 添加资源图片目录：
  在android ios lib同目录建立一个images文件夹，将图片都放到该文件夹下

  
  image.png

• 配置图片信息
  在pubspec.yaml中，将每个图片信息添加到文件中

  
  image.png

注意 assets 和下面- images/xxx.jpg 的缩进，要严格按照上图所示，否则易出错。

• Packages get下
  修改完pubspec.yaml的assets后都需要重新获取下

  
  image.png
  

  点击Packages get 或命令行运行也可以。

• 重新运行项目即可

Image.network 显示网络图片

Image.network("http://xxxxx.jpg",width: 50,height: 50,)

Image.asset 显示项目中的图片

Image.asset(String name, {
    Key key,
    AssetBundle bundle,//?
    this.semanticLabel,//?
    this.excludeFromSemantics = false,//?
    double scale,//缩放系数，图片显示宽高= 图片原图宽高/scale
    this.width,//控件宽
    this.height,//控件高
    this.color,   //单一颜色，与colorBlendMode混合模式共同作用
    this.colorBlendMode,//颜色混合模式  与color共同使用
    this.fit,//图片在父控件范围内的显示方式
    this.alignment = Alignment.center,//在范围内，图片的对齐方式
    this.repeat = ImageRepeat.noRepeat,//如果图片没有完全覆盖完控件范围，那么剩余空白范围，图片怎么处理。
    this.centerSlice,  通过rect确定图片的四个角的大小，这四个角保持不变，其余部位拉伸，直至填满整个控件
    this.matchTextDirection = false,//?
    this.gaplessPlayback = false,//?
    String package,
    this.filterQuality = FilterQuality.low,
  })

• 图片显示

  
  image.png

//图片保持比例，按原图大小显示，如果宽高任何一个超出了屏幕宽高，则将超出屏幕的那个宽高设定为屏幕宽高，如果都超出了，那么图片将尽可能大的在屏幕范围内按照原比例显示，也就是图片显示的宽为屏幕宽（高按比例）或高为屏幕高（宽按比例）。
//在图片可显示的尺寸内，图片居中，保持原比例显示
Image.asset("images/img03.jpg")

• width 设置图片控件宽度

• height 设置图片控件高度

  
  image.png

//指定图片显示范围 width 和height
//图片保持比例显示，尽量按原图大小显示，如果宽高任何一个超出了给定宽高，则将超出给定宽高的那个宽高设定为给定宽高，，如果都超出了，那么图片将尽可能大的在给定范围内按照原比例显示，也就是图片显示的宽为给定宽（高按比例）或高为给定高（宽按比例）。
//在图片可显示的尺寸内，图片居中，保持原比例显示
Image.asset("images/img03.jpg",width: 200,height: 200,),
Divider( height: 10,color: Colors.grey,),

image.png

Image.asset("images/img03.jpg",width: 200,height: 300,),
Divider(height: 10,color: Colors.grey,),

image.png

Image.asset("images/img03.jpg",width: 600,height: 200,),
Divider(height: 10,color: Colors.grey,),

• Image的width 和height受容器大小限制，如果超出了容器大小，按容器大小计算

  
  image.png

Container(width: 200,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03.jpg",width: 300,height: 300,),
            ),
Divider(height: 10,color: Colors.grey,),

alignment 属性 在容器内的显示位置，默认Alignment.center 中间，取值包括：

Alignment.topLeft 顶部靠左
Alignment.topCenter 顶部中间
Alignment.topRight 顶部靠右
Alignment.centerLeft 中间靠左
Alignment.center 中间
Alignment.centerRight 中间靠右
Alignment.bottomLeft 底部靠左
Alignment.bottomCenter 底部中间
Alignment.bottomRight 底部靠右
Alignment.lerp(Alignment.topLeft, Alignment.topRight, t) 线性取值，t在0-1之间，t越小越倾向于左侧的值，t越大越倾向于右边的值

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,),
            ),

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.topLeft,),
            ),

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.topCenter,),
            )

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.topRight,),
            )

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.centerLeft,),
            )

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.center,),
            )

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.centerRight,),
            )

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.bottomLeft,),
            )

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.bottomCenter,),
            )

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.bottomRight,),
            )

• Alignment.lerp(Alignment a, Alignment b, t)

  
  image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.1),),
            ),
Divider(height: 10,color: Colors.grey,),
Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.3),),
            ),
Divider(height: 10,color: Colors.grey,),
Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.5),),
            )

image.png

Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.7),),
            ),
Divider(height: 10,color: Colors.grey,),
Container(width: 300,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 300,height: 200,alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.9),),
            )

fit属性，图片在控件范围内的显示方式

BoxFit.none，如果图片尺寸小于控件范围，则居中显示，否则以控件大小截取原图中间位置范围的图片显示，
BoxFit.contain 大图缩小 小图放大，保持比例，使图片的宽或高与控件宽或高一致
BoxFit.cover 保持原图比例，大图缩小，小图放大，直至把整个控件填满，图片的宽或高至少有一个与图片的宽或高一致，另一边裁剪
BoxFit.fill 不考虑原图比例，图片的宽放大或缩小到控件宽，并且图片高放大或缩小到控件高，填充满控件
BoxFit.fitHeight 图片高放大或缩小至控件高，宽等比放大或缩小
BoxFit.fitWidth 图片宽放大或缩小至控件高，高等比放大或缩小
BoxFit.scaleDown 如果图片尺寸大于控件范围，就缩放图片直至能显示完全图片，也就是宽或高中的一个与控件宽高一致。图片尺寸小于控件，则不处理，居中显示

说明：图片img03尺寸大于控件范围，图片img03_small尺寸小于控件范围

image.png

//不设置fit   小图居中显示
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,),
            ),
// 设置BoxFit.none   小图居中显示
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,fit: BoxFit.none,),
            ),

image.png

//不设置fit   大图尽可能大的在控件内按原比例显示
Divider(height: 10,color: Colors.grey,),
            Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03.jpg",width: 200,height: 200,),
            ),
//设置BoxFit.none  使用控件大小在原图中间位置裁剪图片显示
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03.jpg",width: 200,height: 200,fit: BoxFit.none,),
            ),

image.png

//小图宽度放大至控件宽
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,fit: BoxFit.contain,),
            ),
// 大图宽度缩小至控件宽，图片比例不变
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03.jpg",width: 200,height: 200,fit: BoxFit.contain,),
            ),

image.png

//小图放大，直至填充满控件，至少宽或高中的一个与控件的宽高一致，另一个变裁剪
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,fit: BoxFit.cover,),
            ),
//大图缩小，直至填充满控件，至少宽或高中的一个与控件的宽高一致，另一个变裁剪
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03.jpg",width: 200,height: 200,fit: BoxFit.cover,),
            ),

image.png

//小图放大  宽放大至控件宽  高放大至控件高  不考虑原图比例
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,fit: BoxFit.fill,),
            ),
//大图缩小  宽缩小至控件宽  高缩小至控件高  不考虑原图比例
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03.jpg",width: 200,height: 200,fit: BoxFit.fill,),
            ),

image.png

Divider(height: 10,color: Colors.grey,),
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,fit: BoxFit.fitHeight,),
            ),
Divider(height: 10,color: Colors.grey,),
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,fit: BoxFit.fitWidth,),
            ),

image.png

//小图不变，居中显示
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,fit: BoxFit.scaleDown,),
            ),
//大图缩小，直至能显示完全图片
Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03.jpg",width: 200,height: 200,fit: BoxFit.scaleDown,),
            ),

repeat 如果图片没有完全覆盖完控件范围，那么剩余空白范围，图片怎么处理。

ImageRepeat.noRepeat 不处理
ImageRepeat.repeat xy轴重复显示
ImageRepeat.repeatX x轴重复显示 y轴不变
ImageRepeat.repeatY y轴重复显示 x轴不变

image.png

Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_min.jpg",width: 200,height: 200,repeat: ImageRepeat.repeat,),
            )

image.png

Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_min.jpg",width: 200,height: 200,repeat: ImageRepeat.repeatX,),
            )

image.png

Container(width: 300,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_min.jpg",width: 200,height: 200,repeat: ImageRepeat.repeatY,),
            )

centerSlice

Rect.fromLTRB(70, 70, 140, 140) 确定四个角的大小，这四个角不拉伸，其余位置拉伸，直至填满控件

image.png

Container(width: 400,height: 300,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200,centerSlice:Rect.fromLTRB(70, 70, 140, 140) ,),
            ),

scale

image.png

Divider(height: 10,color: Colors.grey,),
Container(width: 200,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200 ,scale: 1.5,),
            ),
Divider(height: 10,color: Colors.grey,),
Container(width: 200,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200 ,scale: 2,),
            ),
Divider(height: 10,color: Colors.grey,),
Container(width: 200,height: 200,color: Colors.orange[200],
              child: Image.asset("images/img03_small.jpg",width: 200,height: 200 ,scale: 3,),
            ),