博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Flutter Image(图片)
阅读量:5093 次
发布时间:2019-06-13

本文共 2265 字,大约阅读时间需要 7 分钟。

Image是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image 有许多的静态函数:

  • new Image.asset - 用于从资源目录的显示图片。
  • new Image.network - 用于从网络上显示图片。
  • new Image.file - 用于从文件里显示图片。
  • new Image.memory - 用于从内存里(Uint8List)显示图片。
// 资源图片new Image.asset('imgs/logo.jpeg'),//网络图片new Image.network(    'https://flutter.io/images/homepage/header-illustration.png'),// 本地文件图片new Image.file(new File("/Users/gs/Downloads/1.jpeg")),// Uint8List图片new Image.memory(bytes),//使用ImageProvider加载图片new Image(image: new NetworkImage("https://flutter.io/images/homepage/screenshot-2.png"))

  

Image 有以下常用属性:

  • alignment → AlignmentGeometry - 图像边界内对齐图像。
  • centerSlice → Rect - 九片图像的中心切片。
  • color → Color - 该颜色与每个图像像素混合colorBlendMode。
  • colorBlendMode → BlendMode - 用于 color 与此图像结合使用。
  • fit → BoxFit - 图像在布局中分配的空间。
  • gaplessPlayback → bool - 当图像提供者发生变化时,是继续显示旧图像(true)还是暂时不显示(false)。
  • image → ImageProvider - 要显示的图像。
  • matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。
  • repeat → ImageRepeat - 未充分容器时,是否重复图片。
  • height → double - 图像的高度。
  • width → double - 图像的宽度。

圆角图片

Image 是不支持圆角和阴影的,目前可以通过使用 CircleAvatar 和 Container 实现。

var img = 'https://b-ssl.duitang.com/uploads/item/' +        '201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';new CircleAvatar(    backgroundImage: new NetworkImage(url),    radius: 100.0,      // --> 半径越大,图片越大),

  

使用 Container 实现,其原理是把图片放在 decoration 里,而不是 child 里,因为把图片放在 child 里并设置 borderRadius 时会出现一个图片穿透的问题,Container 还没有 overflow 属性。

 

new Container(    width: 200.0,    height: 200.0,    margin: const EdgeInsets.all(20.0),    decoration: new BoxDecoration(        color: Colors.white,        image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover),        shape: BoxShape.circle,    ),),

  

上面实现的都是一个圆形图片,下面的实现一个真正的圆角图片。

new Container(    width: 200.0,    height: 200.0,    margin: const EdgeInsets.all(20.0),    decoration: new BoxDecoration(        color: Colors.white,        image: new DecorationImage(image: new NetworkImage(this.imgsrc), fit: BoxFit.cover),        shape: BoxShape.rectangle,              // <-- 这里需要设置为 rectangle        borderRadius: new BorderRadius.all(            const Radius.circular(20.0),        // <-- rectangle 时,BorderRadius 才有效        ),    ),),

  

 

转载于:https://www.cnblogs.com/pythonClub/p/10858669.html

你可能感兴趣的文章
http://coolshell.cn/articles/10910.html
查看>>
[转]jsbsim基础概念
查看>>
Thrift Expected protocol id ffffff82 but got 0
查看>>
【2.2】创建博客文章模型
查看>>
【3.1】Cookiecutter安装和使用
查看>>
【2.3】初始Django Shell
查看>>
Linux(Centos)之安装Redis及注意事项
查看>>
bzoj 1010: [HNOI2008]玩具装箱toy
查看>>
Kotlin动态图
查看>>
从零开始系列之vue全家桶(1)安装前期准备nodejs+cnpm+webpack+vue-cli+vue-router
查看>>
ASP.NET缓存 Cache之数据缓存
查看>>
bzoj3529: [Sdoi2014]数表
查看>>
SSH三大框架 整合必备jar包
查看>>
什么是电子商务?电子商务面临的几个关键问题及解决办法?电子商务的核心是什么?B2C电子商务运营的核心是什么 ?...
查看>>
Jsp抓取页面内容
查看>>
AJAX与servlet的组合,最原始的
查看>>
大三上学期软件工程作业之点餐系统(网页版)的一些心得
查看>>
MySQL 数据表修复及数据恢复
查看>>
可选参数的函数还可以这样设计!
查看>>
走高端树品牌 IT大佬竞相“归田”
查看>>