import 'package:flutter/material.dart' ;
void main ( ) {
runApp ( const MaterialApp (
home: MyHomePage ( ) ,
) ) ;
}
class MyHomePage extends StatelessWidget {
const MyHomePage ( { super . key} ) ;
@override
Widget build ( BuildContext context) {
return Scaffold (
appBar: AppBar (
title: const Center ( child: Text ( "图片控件" ) ) ,
) ,
body: Center (
child: Column (
mainAxisAlignment: MainAxisAlignment. center,
children: [
const Image (
image: AssetImage ( "assets/imgs/touxiang.jpg" ) ,
width: 100.0 ,
) ,
const SizedBox ( height: 10.0 ) ,
Image. 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 ,
)
] ,
) ,
) ,
) ;
}
}
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，指定图片的过滤数量。
import 'package:flutter/material.dart' ;
void main ( ) {
runApp ( const MaterialApp (
home: MyHomePage ( ) ,
) ) ;
}
class MyHomePage extends StatelessWidget {
const MyHomePage ( { super . key} ) ;
@override
Widget 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,
) ,
) ,
] ,
) ,
) ) ;
}
}
