1、加载图片
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 ,
)
] ,
) ,
) ,
) ;
}
}
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,指定图片的过滤数量。
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,
) ,
) ,
] ,
) ,
) ) ;
}
}