Flutter 中的 Image 组件 如何加载网络图片和本地图片

如下,直接上代码说明:

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组件作为父级组件,自动适应圆角.