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: [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});@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,),),],),));}
}