Flutter图片控件（七）

1、加载图片

import 'package:flutter/material.dart';void main() {runApp(const MaterialApp(home: MyHomePage(),));
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Center(child: Text("图片控件")),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 静态引入方式1const Image(image: AssetImage("assets/imgs/touxiang.jpg"),width: 100.0,),const SizedBox(height: 10.0),// 静态引入方式2Image.asset("assets/imgs/touxiang.jpg",width: 50.0,),const SizedBox(height: 10.0,),// 从网络加载图像const Image(image: NetworkImage("https://cdn.jsdelivr.net/gh/Justinc-github/images/touxiang.jpg"),width: 100.0,)],),),);}
}

• 效果图：

2、图片参数

const Image({super.key,required this.image,this.frameBuilder,this.loadingBuilder,this.errorBuilder,this.semanticLabel,this.excludeFromSemantics = false,this.width,this.height,this.color,this.opacity,this.colorBlendMode,this.fit,this.alignment = Alignment.center,this.repeat = ImageRepeat.noRepeat,this.centerSlice,this.matchTextDirection = false,this.gaplessPlayback = false,this.isAntiAlias = false,this.filterQuality = FilterQuality.medium,});

• super.key：指定Image组件的标识，不指定自动生成一个标识符；
• image：必选参数，它是一个ImageProvider对象，用于指定要显示的图片；
• frameBuilder：在图片加载时显示一个自定义框架；
• loadingBuilder：在图片加载时显示自定义加载指示器；
• errorBuilder：在图片加载时显示一个自定义错误提示；
• semanticLabel：为图片提供语义标签；
• excludeFromSemantics：默认为false，设置为true图片将被排除在语义树之外，屏幕阅读器等辅助技术将不会读取它；
• width：指定图片的宽；
• height：指定图片的高；
• color：用于给图片着色；
• opacity：控制图片的透明度；
• colorBlendMode：可选枚举值，指定颜色混合模式；
• fit：可选枚举值。用于控制图片如何适应仪器，
  • fill：填充父容器所有空间；
  • cover：按照宽高比方法，超出部分会被裁掉；
  • contain：按照长宽自适应当前父容器大小；
  • fitWidth：缩放当前图片至显示空间的宽度，高度按比例缩放，然后居中显示；
  • fitHeight：缩放当前图片至显示空间的高度，宽度按比例缩放，然后居中显示；
  • none：没有适应，图片中间显示在控件内，超出部分会被剪裁。
• alignment：可选对齐方式，默认为Alignment.center；
• repeat：可选枚举值，指定图片是否重复显示，如何重复；
• centerSlice：这是一个可选的Rect对象，指定如片中心切片区域，以便缩放时不会失真；
• matchTextDirection：默认为false，设置为true时，方向取决于文本方向；
• gaplessPlayback：默认为false，设置为true时，图片将在重新加载时无缝播放，不会出现闪烁；
• isAntiAlias：默认为false，设置为true时，图片将使用抗锯齿基础，以减少边缘锯齿；
• filterQuality：枚举值，默认为FilterQuality.medium，指定图片的过滤数量。

// 以fitshu'xingimport 'package:flutter/material.dart';void main() {runApp(const MaterialApp(home: MyHomePage(),));
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("图片控件"),),body: const Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.fill,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.cover,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.contain,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.fitWidth,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.fitHeight,),),SizedBox(height: 100.0,child: Image(image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.none,),),],),));}
}image: AssetImage("assets/imgs/touxiang.jpg"),fit: BoxFit.none,),),],),));}
}