【Flutter实战】图片组件及四大案例

• 通常情况下，图标比图片体积更小，显著的减少App包体积。
• 图标不会出现失真或者模糊的现象，例如将20x20的图片，渲染在200x200的屏幕上，图片会失真或模糊，而图标是矢量图，不会失真，就像字体一样。
• 多个图标可以存放在一个文件中，方便管理。
• 全平台通用。

Image

Image.network(
  'http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg',)

assets:
  - assets/images/

assets:
  - assets/images/aa.jpg

Image.asset('assets/images/aa.jpg')

Image.file(File('path'))

Image.asset('assets/images/aa.jpg',width: 100,height: 200,),

Container(
  color: Colors.red.withOpacity(.3),child: Image.asset('assets/images/aa.jpg',width: 150,height: 150),)

Container(
  color: Colors.red.withOpacity(.3),height: 150,fit: BoxFit.fill,)

Container(
  color: Colors.red.withOpacity(.3),fit: BoxFit.cover,)

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

Image.asset(
  'assets/images/aa.jpg',fit: BoxFit.none,alignment: Alignment.centerRight,

Container(
  color: Colors.red.withOpacity(.3),child: Image.asset(
    'assets/images/aa.jpg',alignment: Alignment.centerLeft,

• 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：将按位异或运算符应用于源图像和目标图像。

Image.asset(
  'assets/images/aa.jpg',width: double.infinity,repeat: ImageRepeat.repeatX,)

• repeat：x,y方向都充满。
• repeatX：x方向充满。
• repeatY：y方向充满。
• noRepeat：不重复。

Directionality(
    textDirection: TextDirection.rtl,child: Image.asset(
      'assets/images/logo.png',matchTextDirection: true,)),

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg',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,);
  },)

Image.network(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg',loadingBuilder: (BuildContext context,ImageChunkEvent loadingProgress) {
  if (loadingProgress == null) {
    return child;
  }
  return Center(
    child: CircularProgressIndicator(
      value: loadingProgress.expectedTotalBytes != null
          ? loadingProgress.cumulativeBytesLoaded /
              loadingProgress.expectedTotalBytes
          : null,);
})

Container(
    width: 250,height: 300,decoration: BoxDecoration(
        image: DecorationImage(
            centerSlice: Rect.fromLTWH(20,20,10,10),image: AssetImage(
              'assets/images/abc.jpg',fit: BoxFit.fill))),

Icon

Icon(Icons.add),

Icon(
  Icons.add,size: 40,color: Colors.red,)

案例

聊天背景(.9图实现)

Container(
  width: 200,padding: EdgeInsets.only(left: 8,top: 8,right: 20,bottom: 8),decoration: BoxDecoration(
      image: DecorationImage(
          centerSlice: Rect.fromLTWH(20,1,1),image: AssetImage(
            'assets/images/chat.png',fit: BoxFit.fill)),child: Text('老孟，专注分享Flutter技术和应用实战。'
      '老孟，专注分享Flutter技术和应用实战。'
      '老孟，专注分享Flutter技术和应用实战。',)

centerSlice: Rect.fromLTWH(20,60),

圆形带边框的头像

Container(
  width: 100,height: 100,padding: EdgeInsets.all(3),decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.blue),child: Container(
    decoration: BoxDecoration(
        shape: BoxShape.circle,image: DecorationImage(
            image: AssetImage('assets/images/aa.jpg'),fit: BoxFit.cover)),)

图片占位符：

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg',frameBuilder: (
    BuildContext context,bool wasSynchronouslyLoaded,) {
    if (frame == null) {
      return Image.asset(
        'assets/images/place.png',);
    }
    return child;
  },)

添加自己的图标库

Icon(IconData(0xe613,fontFamily: 'appIconFonts')