加载图片

加载网络图片

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image(
              image: NetworkImage('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd6%2F1802%2F92%2F953a189ea54336b5.jpg_r_720x480x95_2611ec29.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620267881&t=c3c553db59153b5b22a6e6559f740332'),
            ),
          ),
      ),
    );
  }
}

或者

...
child: Image.network('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd6%2F1802%2F92%2F953a189ea54336b5.jpg_r_720x480x95_2611ec29.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620267881&t=c3c553db59153b5b22a6e6559f740332'),
...

截屏2021-04-06 上午10.26.10.png

加载本地图片

1. 手动创建图片目录 `assets/images`，将图片拖到文件夹中

截屏2021-04-06 上午10.45.33.png

2. `pubspec.yaml`配置文件中设置图片路径（注意assets:前面的空格可能引起编译错误）

截屏2021-04-06 上午10.44.09.png

3. 加载本地图片

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.asset('assets/images/img.jpg')
          ),
      ),
    );
  }
}

截屏2021-04-06 上午10.47.38.png

图片常用属性

 Image.asset(
    String name, {
    Key? key,
    AssetBundle? bundle,
    this.frameBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double? scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    String? package,
    this.filterQuality = FilterQuality.low,
    int? cacheWidth,
    int? cacheHeight,
  })

frameBuilder

当加载图片的时候回调frameBuilder可以用于处理图片加载时显示占位图片和加载图片的过渡效果，比如淡入淡出效果

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620271164&t=c27a699d576423aedeb27e955fb3eaf9',
              frameBuilder: (BuildContext context, Widget child, int frame,
                  bool wasSynchronouslyLoaded) {
                if (wasSynchronouslyLoaded) {
                  return child;
                }
                return AnimatedOpacity(
                  child: child,
                  opacity: frame == null ? 0 : 1,
                  duration: const Duration(seconds: 2),
                  curve: Curves.easeOut,
                );
              },
            ),
          ),
      ),
    );
  }
}

errorBuilder

当图片加载失败时，显示的视图

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://xxx.png',
              errorBuilder: (ctx, exception, stackTrace) {
                return Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                  child: Center(child: Text('Missing Image')),
                );
              },
            ),
          ),
      ),
    );
  }
}

截屏2021-04-06 上午11.35.33.png

semanticLabel和excludeFromSemantics

semanticLabel表示描述图片语义读屏时可以提供语义描述 excludeFromSemantics 表示是否去除图片语义

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620271164&t=c27a699d576423aedeb27e955fb3eaf9',
                semanticLabel: "河流以及两旁的树木",
                excludeFromSemantics: false
            ),
          ),
      ),
    );
  }
}

color和colorBlendMode常用于滤镜效果

下面效果了解一下即可

clear：清楚源图像和目标图像。
color：获取源图像的色相和饱和度以及目标图像的光度。
colorBurn：将目标的倒数除以源，然后将结果倒数。
colorDodge：将目标除以源的倒数。
darken：通过从每个颜色通道中选择最小值来合成源图像和目标图像。
difference：从每个通道的较大值中减去较小的值。合成黑色没有效果。合成白色会使另一张图像的颜色反转。
dst：仅绘制目标图像。
dstATop：将目标图像合成到源图像上，但仅在与源图像重叠的位置合成。
dstIn：显示目标图像，但仅显示两个图像重叠的位置。不渲染源图像，仅将其视为蒙版。源的颜色通道将被忽略，只有不透明度才起作用。
dstOut：显示目标图像，但仅显示两个图像不重叠的位置。不渲染源图像，仅将其视为蒙版。源的颜色通道将被忽略，只有不透明度才起作用。
dstOver：将源图像合成到目标图像下。
exclusion：从两个图像的总和中减去两个图像的乘积的两倍。
hardLight：调整源图像和目标图像的成分以使其适合源图像之后，将它们相乘。
hue：获取源图像的色相，以及目标图像的饱和度和光度。
lighten：通过从每个颜色通道中选择最大值来合成源图像和目标图像。
luminosity：获取源图像的亮度，以及目标图像的色相和饱和度。
modulate：将源图像和目标图像的颜色分量相乘。
multiply：将源图像和目标图像的分量相乘，包括alpha通道。
overlay：调整源图像和目标图像的分量以使其适合目标后，将它们相乘。
plus：对源图像和目标图像的组成部分求和。
saturation：获取源图像的饱和度以及目标图像的色相和亮度。
screen：将源图像和目标图像的分量的逆值相乘，然后对结果求逆。
softLight：对于低于0.5的源值使用colorDodge，对于高于0.5的源值使用colorBurn。
src：放置目标图像，仅绘制源图像。
srcATop：将源图像合成到目标图像上，但仅在与目标图像重叠的位置合成。
srcIn：显示源图像，但仅显示两个图像重叠的位置。目标图像未渲染，仅被视为蒙版。目标的颜色通道将被忽略，只有不透明度才起作用。
srcOut：显示源图像，但仅显示两个图像不重叠的位置。
srcOver：将源图像合成到目标图像上。
xor：将按位异或运算符应用于源图像和目标图像。

填充方式`fit`

fill：完全填充，宽高比可能会变。
contain：等比拉伸，直到一边填充满。
cover：等比拉伸，直到2边都填充满，此时一边可能超出范围。
fitWidth：等比拉伸，宽填充满。
fitHeight：等比拉伸，高填充满。
none：当组件比图片小时，不拉伸，超出范围截取。
scaleDown：当组件比图片小时，图片等比缩小，效果和contain一样。

截屏2021-04-06 上午11.01.22.png

设置对齐方式 alignment

topLeft topCenter topRight centerLeft center centerRight bottomLeft bottomCenter bottomRight

repeat

有空余空间时是否重复显示图片

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 500,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.asset(
              'assets/images/img.jpg',
                repeat: ImageRepeat.repeat,
            )
          ),
      ),
    );
  }
}

截屏2021-04-06 上午11.44.49.png

Flutter组件Image