Flutter控件之Image

简介: Flutter控件之Image
+关注继续查看

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文件夹,将图片放在该文件夹下。如下图:

7cd961a26f2dceac31c2f1ac8e016bf7.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(),
      ),
相关文章
|
5天前
Flutter StatefulWidget传递数据,多级控件传递数据
Flutter StatefulWidget传递数据,多级控件传递数据 在Flutter中,StatefulWidget可以通过构造函数将数据传递给其子控件,这种方式适用于一些简单的场景。但是,当存在多级嵌套控件时,将数据从祖先传递到后代可能会变得困难。在这种情况下,可以使用Flutter提供的InheritedWidget类来传递数据。
|
5月前
|
API Android开发
Flutter控件封装之视频进度条
视频控制器,三方所提供的样式,有时很难满足我们的需求,对于此情况,我们不得不在此基础上自行封装,今天所分享的文章就是一个很简单的控制器封装案例,包含了基本的播放暂停,全屏和退出全屏,以及时间和进度的展示,封装了事件回调以及各个属性的控制,基本上可以满足大部分的业务需求,即便不满足,大家也可以在此基础之上拓展。
|
5月前
|
Android开发 iOS开发 容器
Flutter控件封装之轮播图Banner
Flutter中实现轮播图的方式有很多种,比如使用三方flutter_swiper,card_swiper等等,使用这些三方,可以很快很方便的实现一个轮播图展示,基本上也能满足我们日常的开发需求,如果说,想要一些定制化的操作,那么就不得不去更改源码或者自己自定义一个,自己定义的话,Flutter中提供了原生组件PageView,可以使用它很方便的来实现一个轮播图。
|
5月前
|
存储 Android开发
Flutter控件之图片Image封装
Flutter中偏偏原生的控件,少了很多需要又常用的属性,比如宽高,比如内外边距,又比如点击事件,如果不采取封装,视图的结构会一层嵌套一层,徒增很多的冗余代码,所以,为了简洁代码,还有为了拓展原生组件没有的属性,就不得不进行一次简单的封装,使其在调用的时候,可以很方便的实现某些功能。
Flutter基础widgets教程-Image篇
Flutter基础widgets教程-Image篇
157 0
|
缓存 Android开发
Flutter入门:Image组件
在flutter中显示图片的就是Image,相当于android中的ImageView,但是要比ImageView功能强大很多。 比如支持gif动图,可以加载网络图片,缓存机制,图片处理等。实际上Image基本上实现了平时我们用到的图片加载框架(如glide)的大部分功能。
172 0
|
存储 缓存 编解码
探索Flutter_Image显示Webp逻辑
简介 最近探索了一下新增Flutter的Image widget对webp做一个stopAnimation的拓展的Api,顺便了解一下Image整个结构和对一些多帧图片的处理。 我们先看看Image的一个类图结构。
215 0
|
Web App开发
Flutter web问题:Failed to load network image
我的解决办法: flutter build web --release --web-renderer html flutter run --web-renderer html flutter run -d chrome --web-renderer html
292 0
Flutter web问题:Failed to load network image
|
Dart 开发者
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )(二)
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )(二)
201 0
【Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )(二)