Flutter教学目录持续更新中

github源代码持续更新中

1.Image介绍

Image是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

2.Image 的静态函数

Image.asset - 用于从资源目录的显示图片,需要在 pubspec.yaml 文件中声明。
Image.network - 用于从网络上显示图片。
Image.file - 用于从文件里显示图片。
Image.memory - 用于从内存里（Uint8List）显示图片。

3.Image 常用属性

alignment → AlignmentGeometry - 图像边界内对齐图像。
centerSlice → Rect - 九片图像的中心切片。
color → Color - 该颜色与每个图像像素混合colorBlendMode。
colorBlendMode → BlendMode - 用于 color 与此图像结合使用。
fit → BoxFit - 图像在布局中分配的空间。
gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。
image → ImageProvider - 要显示的图像。
matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。
repeat → ImageRepeat - 未充分容器时，是否重复图片。
height → double - 图像的高度。
width → double - 图像的宽度。

4.使用方法

加载资源图片需要将图片资源放入工程中，例如：新建images文件夹，将图片放在该文件夹下，图片适配则是使用ios的方式1X，2X，3X：

1600342190613.jpg

然后在pubspec.yaml中配置assets：

1600342274064.jpg

加载资源/网络/本地文件图片/内存图片：

1600342387006.jpg

Container(
            color: Colors.grey,
            margin: EdgeInsets.only(top: 10, bottom: 10),
            padding: EdgeInsets.only(top: 10, bottom: 10),
            child: Row(
              children: [
                Expanded(
                  child: Image(
                    image: AssetImage('images/scan.png'),
                  ),
                ),
                Expanded(
                  child: Image(image: NetworkImage(imageUrl)),
                ),
                Expanded(
                  child: Image(
                    image: FileImage(File('')),
                    //byte 数组加载成图片
//                    image: MemoryImage(),
                  ),
                ),
              ],
            ),
          ),

占位图加载图片：

1600342397672.jpg

Container(
            color: Colors.grey,
            margin: EdgeInsets.only(top: 10, bottom: 10),
            padding: EdgeInsets.only(top: 10, bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Expanded(
                    child: FadeInImage.assetNetwork(
                  placeholder: 'images/scan.png',
                  image: 'qqqqqq',
                  width: 100,
                  height: 100,
                )),
                Expanded(
                    child: FadeInImage.assetNetwork(
                  placeholder: 'images/scan.png',
                  image: imageUrl,
                  width: 100,
                  height: 100,
                )),
                //也可以使用内存图片做占位图
                // Expanded(
                //     child: FadeInImage.memoryNetwork(
                //       placeholder:Uint8List ,
                //       image: imageUrl,
                //       width: 100,
                //       height: 100,
                //     ))
              ],
            ),
          )

圆形图片：1.裁剪实现 2.CircleAvatar实现 3.Container边框实现

1600342554979.jpg

 Container(
            color: Colors.grey,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.only(top: 10, bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ClipRRect(
                  child: Image.network(
                    imageUrl,
                    fit: BoxFit.cover,
                    width: 100,
                    height: 100,
                  ),
                  borderRadius: BorderRadius.circular(50),
                ),
                CircleAvatar(
                  backgroundColor: Colors.white,
                  backgroundImage: NetworkImage(imageUrl),
                  //半径越大，图片越大
                  radius: 50,
                ),
                Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      image: DecorationImage(
                          image: NetworkImage(imageUrl), fit: BoxFit.cover),
                      shape: BoxShape.circle),
                ),
              ],
            ),
          ),

圆角图片：1.裁剪实现 2.Container边框实现

1600342565262.jpg

Container(
            color: Colors.grey,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.only(top: 10, bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ClipRRect(
                  child: Image.network(
                    imageUrl,
                    width: 100,
                    height: 100,
                    fit: BoxFit.cover,
                  ),
                  borderRadius: BorderRadius.circular(10),
                ),
                Container(
                  margin: EdgeInsets.only(left: 10),
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(imageUrl), fit: BoxFit.cover),
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.circular(10)),
                ),
              ],
            ),
          ),

5.fit：BoxFit

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

1600342723196.jpg

Container(
            color: Colors.grey,
            margin: EdgeInsets.only(top: 10, bottom: 10),
            padding: EdgeInsets.all(10),
            child: Column(
              children: [
                Container(
                  width: double.infinity,
                  height: 100,
                  child: Image(
                    image: NetworkImage(imageUrl),
                    fit: BoxFit.cover,
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 100,
                  child: Image(
                    image: NetworkImage(imageUrl),
                    fit: BoxFit.fill,
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 100,
                  child: Image(
                    image: NetworkImage(imageUrl),
                    fit: BoxFit.contain,
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 100,
                  child: Image(
                    image: NetworkImage(imageUrl),
                    fit: BoxFit.scaleDown,
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 100,
                  child: Image(
                    image: NetworkImage(imageUrl),
                    fit: BoxFit.fitHeight,
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 100,
                  child: Image(
                    image: NetworkImage(imageUrl),
                    fit: BoxFit.fitWidth,
                  ),
                ),
              ],
            ),
          ),

下一节学习基础组件之Text