Flutter 图片组件_Image_flutter decorationimage

width & height

• 设置宽高 (当外层被Container包裹时,如果Container设置了宽高,则image的宽高设置失效)

height: 150,
width: 150,
1
2

fit

• 图片的显示样式

/**
 * 图片显示样式
 * fill: 铺满
 * contain: 原比例显示
 * cover: 中心裁剪
 * */
fit: BoxFit.contain
1
2
3
4
5
6
7

repeat

• 处理盒子中没有被图片覆盖的部分该如何显示

/**
 * 处理盒子中没有被图片覆盖的部分该如何显示
 * repeat: x和y轴重复
 * repeatX: x轴重复
 * repeatY: y轴重复
 * noRepeat: 透明
 * */
repeat: ImageRepeat.noRepeat,
1
2
3
4
5
6
7
8

生成圆形图片的两种方式

第一种

child: Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
        /**
         * 利用外部的container实现圆形图片
         * */
        borderRadius: BorderRadius.circular(75),
        //此处使用装饰类Imange  -- DecorationImage
        image: DecorationImage(
            image: NetworkImage(_imgUrl),
            fit: BoxFit.cover)
		),
	),
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第二种

//利用ClipOval包裹
child: ClipOval(
         child: Image.network(
           _imgUrl2,
           height: 150,
           width: 150,
           fit: BoxFit.cover,
         ),
       ),
1
2
3
4
5
6
7
8
9

加载远程图片

 /**
 * 加载远程图片
 * */
child: Image.network(
  //图片地址
  "https://c-ssl.duitang.com/uploads/item/201809/01/20180901190625_wmpeq.jpeg",
  fit: BoxFit.cover
),
1
2
3
4
5
6
7
8

加载本地图片

1. 在根目录下创建images文件夹
2. 在images文件夹下创建 2.0x 和3.0x 文件夹
3. 在 images & 2.0x & 3.0x 三个文件夹中分别放入对应的图片
4. 在pubspec.yaml文件中 向assets 中加入图片信息 ,注意行间对齐
5. 在布局中调用 Image.asset(‘images/**.png’,) 构造方法创建本地Image

child: Image.asset(
  'images/11.png',

  //其他属性与远程图片一致
),
1
2
3
4
5

示例

class ImageBody extends StatelessWidget {
  final String _imgUrl =
      "https://c-ssl.duitang.com/uploads/item/201809/01/20180901190625_wmpeq.jpeg";
  final String _imgUrl2 =
      "https://c-ssl.duitang.com/uploads/item/201809/01/20180901190627_owtos.thumb.1000_0.jpeg";

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 150,
        height: 150,
        decoration: BoxDecoration(
            color: Colors.blue,

            /**
             * 利用外部的container实现圆形图片
             * */
            borderRadius: BorderRadius.circular(75),
            image: DecorationImage(
                image: NetworkImage(_imgUrl), fit: BoxFit.cover)),

        /**
         * 加载远程图片
         * */
//        child: Image.network(
//          //图片地址
//          "https://c-ssl.duitang.com/uploads/item/201809/01/20180901190625_wmpeq.jpeg",
//          //对齐方式
//          alignment: Alignment.center,
//
//          /**
//           * 图片显示样式
//           * fill: 铺满
//           * contain: 原比例显示
//           * cover: 中心裁剪
//           * */
//          fit: BoxFit.contain,
//
//          /**
//           * 处理盒子中没有被图片覆盖的部分该如何显示
//           * repeat: x和y轴重复
//           * repeatX: x轴重复
//           * repeatY: y轴重复
//           * noRepeat: 透明
//           * */
//          repeat: ImageRepeat.noRepeat,
//        ),

        /**
         * 通过ClipOval实现圆形图片
         * */
        /*      child: ClipOval(
          child: Image.network(
              _imgUrl2,
            height: 150,
            width: 50,
            fit: BoxFit.cover,
          ),
        ),*/

        /**
         * 加载本地图片
         * 1. 在根目录下创建images文件夹
         * 2. 在images文件夹下创建 2.0x 和3.0x 文件夹
         * 3. 在images 2.0x 3.0x 文件夹中分别放入对应的图片
         * 4. 在pubspec.yaml文件中 向assets 中加入图片信息 ,注意行间对齐
         *   assets:
            - images/11.png
            - images/2.0x/11.png
            - images/3.0x/11.png
            5.在程序中引入图片
         * */
        child: Image.asset(
          'images/11.png',

          //其他属性与远程图片一致
        ),
      ),
    );
  }
}

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83