Flutter：Image

发表于 | 更新于 | 分类于 | 阅读次数：
Flutter Image 详解

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

  • Image.asset 资源图片
  • Image.network 网络图片
  • Image.file 本地文件图片
  • Image.memory 内存图片
向项目内添加图片
  • 添加资源图片目录：

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

  • 配置图片信息

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

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

  • Packages get下

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

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

  • 重新运行项目即可
Image.network 显示网络图片
1
Image.network("http://xxxxx.jpg",width: 50,height: 50,)

​

Image.asset 显示项目中的图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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,
  })
  • 图片显示

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

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

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

1
2
Image.asset("images/img03.jpg",width: 600,height: 200,),
Divider(height: 10,color: Colors.grey,),
  • Image的width 和height受容器大小限制，如果超出了容器大小，按容器大小计算

1
2
3
4
5
6
7
8
9
10
11
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越大越倾向于右边的值

1
2
3
4
5
6
7
8
9
10
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
    ),
),

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
        alignment: Alignment.topLeft,
    ),
),

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
        alignment: Alignment.topCenter,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
        alignment: Alignment.topRight,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
        alignment: Alignment.centerLeft,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
        alignment: Alignment.center,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
        alignment: Alignment.centerRight,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
        alignment: Alignment.bottomLeft,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 200,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_small.jpg",
        width: 300,
        height: 200,
        alignment: Alignment.bottomCenter,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
        ),
    ),
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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尺寸小于控件范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//不设置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,
    ),  
),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//不设置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,
    ),     
),

​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//小图宽度放大至控件宽
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,
    ),
),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//小图放大，直至填充满控件，至少宽或高中的一个与控件的宽高一致，另一个变裁剪
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,
    ),
),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//小图放大  宽放大至控件宽  高放大至控件高  不考虑原图比例
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,
    ),
),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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,
    ),
),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//小图不变，居中显示
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轴不变

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 300,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_min.jpg",
        width: 200,
        height: 200,
        repeat: ImageRepeat.repeat,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
Container(
    width: 300,
    height: 300,
    color: Colors.orange[200],
    child: Image.asset(
        "images/img03_min.jpg",
        width: 200,
        height: 200,
        repeat: ImageRepeat.repeatX,
    ),
)

1
2
3
4
5
6
7
8
9
10
11
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) 确定四个角的大小，这四个角不拉伸，其余位置拉伸，直至填满控件

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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,
    ),     
),
-------------本文结束感谢您的阅读-------------
如果你喜欢这篇文章，可以请我喝一杯 Coffee ~