如下,直接上代码说明:
mian(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child:image.asset();//本地图片
child:image.network();//网络图片
);
}
}
注意:在fultter项目中,我们在项目的根目录中新建一个 image 文件夹,将原图放在其中,然后再建立imagex2,imagex3文件夹,将对应的@2xhe @3x图片放入其中.
在项目中我们直接 import image 这个文件夹,里面的图片直接访问 原图,系统就会自动适配2倍和3倍图.
关于Image组件属性和用法:
String src, {
Key? key,
double scale = 1.0,
this.frameBuilder,
this.loadingBuilder,
this.errorBuilder,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
this.isAntiAlias = false,
Map<String, String>? headers,
int? cacheWidth,
int? cacheHeight,
关于image圆角思路.
1:在父级组件中进行圆角设置,如在Container组件中属性decoration中设置圆角,然后把属性image: DecorationImage设置成图片显示
2:使用ClipOval组件作为父级组件,自动适应圆角.