Flutter学习笔记四——Image图片组件的使用

官方文档地址

加入图片的几种方式

  • Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
  • Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
  • Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
  • Image.memory: 加载Uint8List资源图片,这个我目前用的不是很多,所以没什么发言权。

以加入网络图片为例子,在Container里加入一张图片,代码如下:

   child: Container(
              child: Image.network(
                "https://upload.jianshu.io/collections/images/1661906/springboot.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240",
//                scale: 5.0,
                fit: BoxFit.contain,
                color: Colors.redAccent,
                colorBlendMode: BlendMode.color,
                repeat: ImageRepeat.repeatX,
              ),
              width: 400,
              height: 300,
              color: Colors.blueAccent,
            ),

为了演示效果,给container设置了宽高和颜色。

fit属性的设置

fit属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的。

  • BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。
  • BoxFit.contain:全图显示,显示原比例,可能会有空隙。
  • BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
  • BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
  • BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。
  • BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大。

图片的混合模式

图片混合模式(colorBlendMode)和color属性配合使用,能让图片改变颜色,里边的模式非常的多,产生的效果也是非常丰富的。具体每种模式是什么意思,可参考官方文档BlendMode

  • color:是要混合的颜色,如果你只设置color是没有意义的。
  • colorBlendMode:是混合模式,相当于我们如何混合。

repeat图片重复

  • ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。
  • ImageRepeat.repeatX: 横向重复,纵向不重复。
  • ImageRepeat.repeatY:纵向重复,横向不重复。


    image.jpg
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,368评论 2 66
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,303评论 4 61
  • 原文转载: 你清理的是一个干净的灵魂上,不小心沾染的灰尘 “就如同这个环境,本来是一个非常洁净的环境,但却因为种种...
    浅浅香荷阅读 377评论 0 0
  • 8月18日,一条评论,一个喜欢,一个关注,四个收藏。这是更新以来收到的最大的惊喜。 虽然我是19号凌晨的时候才看到...
    叔女莫待阅读 177评论 0 1
  • 心底多情才兴奋,笔端无句不精神。 风光在目年年好,四季不同频写真。
    雪窗_武立之阅读 199评论 0 0