Flutter - Image

282 阅读3分钟

Flutter 中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。

1 在工程根目录下创建一个images目录

在这里插入图片描述

2 在pubspec.yaml中的flutter部分添加如下内容:

在这里插入图片描述

3 加载该图片

在这里插入图片描述

Image也提供了一个快捷的构造函数Image.asset用于从asset中加载、显示图片:

在这里插入图片描述

4 从网络加载图片

const Image(
                image: NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F57a42b9002e19.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673019210&t=af3e8abc2bcb71e1d7ac754adca7be03"),
                width: 50.0,
              ),
Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F57a42b9002e19.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673019210&t=af3e8abc2bcb71e1d7ac754adca7be03",
                width: 55.0,),

5 参数

const Image({
            Key key,
            @required this.image,
                  Image:通过ImageProvider来加载图片
                  Image.asset:用来加载本地资源图片
                  Image.file:用来加载本地(File文件)图片
                  Image.network:用来加载网络图片
                  Image.memory:用来加载Uint8List资源(byte数组)图片
            this.frameBuilder,//图片帧处理 ,比如图片边距设置,加载动画之类的。
            this.loadingBuilder,//图片加载的时候一些处理
            this.semanticLabel,
            this.excludeFromSemantics = false,
            this.width,//控件宽度
            this.height,//控件高度
            this.color,//图片背景色
            this.colorBlendMode,//与color属性需要配合使用,就是颜色和图片混合
            this.fit,//设置图片填充方式
                  fit:BoxFit.contain,//尽量撑满容器,并保持原图比例,容器可能会留白
                  fit:BoxFit.fill,//撑满容器,图片拉伸
                  fit:BoxFit.fitWidth,//图片横向撑满容器,图片被裁剪
                  fit:BoxFit.fitHeight,//图片纵向撑满容器,图片被裁剪
                  fit:BoxFit.cover,//图片等比拉伸撑满容器,图片可能被裁剪
                  fit:BoxFit.scaleDown,//无论容器大小,保持图片大小不变剧中显示
                  fit: BoxFit.fill, //撑满容器,图片拉伸
            this.alignment = Alignment.center,//控制图片摆放的位置
            this.repeat = ImageRepeat.noRepeat,//重复
                  repeat: ImageRepeat.repeat, //重复充满容器
                  repeat: ImageRepeat.repeatX,//横向重复
                  repeat: ImageRepeat.repeatY,//纵向重复
            this.centerSlice,//将图片已.9的方式进行切割拉伸
            this.matchTextDirection = false,
            this.gaplessPlayback = false,//当加载新图片时,如果为true保留旧图片的显示,如果为false删除旧图片留空,直到新图标加载完成显示
            this.filterQuality = FilterQuality.low,图像过滤器的质量级别。(渲染模式的质量),默认 FilterQuality.low
            })
 /**
         *  fill:会拉伸填充满显示空间,图片本身长宽比会发生变化,图片会变形。
            cover:会按图片的长宽比放大后居中填满显示空间,图片不会变形,超出显示空间部分会被剪裁。
            contain:这是图片的默认适应规则,图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间,图片不会变形。
            fitWidth:图片的宽度会缩放到显示空间的宽度,高度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。
            fitHeight:图片的高度会缩放到显示空间的高度,宽度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。
            none:图片没有适应策略,会在显示空间内显示图片,如果图片比显示空间大,则显示空间只会显示图片中间部分。
         */

6 示例

在这里插入图片描述

 child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children:  <Widget>[
              Row(
                mainAxisSize: MainAxisSize.max,
                children: const <Widget>[
                  Text("------------"),

                ],
              ),
              const Image(
                image: AssetImage("assets/images/caver.webp"),
                width: 50.0,
              ),
              Image.asset("assets/images/caver.webp",
                width: 55.0),
              const Image(
                image: NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F57a42b9002e19.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673019210&t=af3e8abc2bcb71e1d7ac754adca7be03"),
                width: 50.0,
              ),
              Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F57a42b9002e19.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673019210&t=af3e8abc2bcb71e1d7ac754adca7be03",
                width: 55.0,),
              Image(
                image: img,
                height: 50.0,
                width: 100.0,
                fit: BoxFit.fill,
              ),
              Image(
                image: img,
                height: 50,
                width: 50.0,
                fit: BoxFit.contain,
              ),
              Image(
                image: img,
                width: 100.0,
                height: 50.0,
                fit: BoxFit.cover,
              ),
              Image(
                image: img,
                width: 100.0,
                height: 50.0,
                fit: BoxFit.fitWidth,
              ),
              Image(
                image: img,
                width: 100.0,
                height: 50.0,
                fit: BoxFit.fitHeight,
              ),
              Image(
                image: img,
                width: 100.0,
                height: 50.0,
                fit: BoxFit.scaleDown,
              ),
              Image(
                image: img,
                height: 50.0,
                width: 100.0,
                fit: BoxFit.none,
              ),
              Image(
                image: img,
                width: 100.0,
                color: Colors.blue,
                colorBlendMode: BlendMode.difference,
                fit: BoxFit.fill,
              ),
              Image(
                image: img,
                width: 100.0,
                height: 200.0,
                repeat: ImageRepeat.repeatY ,
              )
            ].map((e){
              return Row(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(16.0),
                    child: SizedBox(
                      width: 100,
                      child: e,
                    ),
                  ),

                ],
              );
            }).toList(),
          )