首页 > 其他分享 >Flutter控件之Image

Flutter控件之Image

时间:2023-02-23 18:31:58浏览次数:28  
标签:控件 Image 参数 image 图片 Flutter 加载

Image简介

Image是Flutter中的图片控件,它的作用是从网络、本地、系统等多种源加载图片资源。支持 JPEG、PNG、 GIF、WebP、BMP 等格式。

Image属性

Image控件有三个主要的属性:

1、image:它接受一个ImageProvider类型的参数,它可以接受AssetImage,NetworkImage,FileImage等。

2、fit:它接受一个BoxFit类型的参数,用来指定图片的适应模式,它有fill,contain,cover,fitWidth,fitHeight,none等几种模式。

3、alignment:它接受一个AlignmentGeometry类型的参数,用来指定图片的对齐方式,它有topLeft,topRight,bottomLeft,bottomRight,center等几种模式。

此外,Image还有很多其他属性,如:

1、repeat:它接受一个ImageRepeat类型的参数,用来指定图片的重复模式,它有noRepeat,repeat,repeatX,repeatY等几种模式。

2、width:它接受一个double类型的参数,用来指定图片的宽度。

3、height:它接受一个double类型的参数,用来指定图片的高度。

4、color:它接受一个Color类型的参数,用来指定图片的颜色。

Image框架用来加载各种图片资源非常方便,可以满足复杂的图片加载需求,还可以搭配其他属性控制图片的显示,使用起来非常简单,是Flutter开发中很重要的一个控件。

使用

加载资源图片需要将图片资源放入工程中。在工程下创建images文件夹,将图片放在该文件夹下。如下图: image.png

然后在pubspec.yaml中配置assets:

flutter:
  assets:
    - images/

代码如下:

Expanded(
  child: Image(
    image: AssetImage('images/1.0x/edge.png'),
  ),
),

NetworkImage FileImage 等的使用类似

    Expanded(
      child: Image(image: NetworkImage(imageUrl)),
    ),
    Expanded(
      child: Image(
        image: FileImage(File('')),
        //byte 数组加载成图片
//                    image: MemoryImage(),
      ),

标签:控件,Image,参数,image,图片,Flutter,加载
From: https://blog.51cto.com/u_15777557/6081645

相关文章