正常我们需要显示一张图片,会用到Image这个控件。
打个比方,我们加载一张本地的图片,
先看一下这个Image.asset的源码:

Image.asset(String name, {
Key key,
AssetBundle bundle,
double scale,
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,
String package,
}) : image = scale != null
? new ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
: new AssetImage(name, bundle: bundle, package: package),
assert(alignment != null),
assert(repeat != null),
assert(matchTextDirection != null),
super(key: key);

基本上根据这些属性名字就能看出这些属性都是干啥的,这里面咱只看fit这个东西,这里有专门讲解这一块用法的一个文章image,(这里说明一下,由于网上的这篇文章大多都长得一样,本人也没分辨出真正作者是谁,如果该链接文章的作者看到的话可以联系我,我把链接改成你的)

fit Description Result
BoxFit.fill 全图显示,显示可能拉伸,充满
 
image
BoxFit.contain 全图显示,显示原比例,不需充满
 
image
BoxFit.cover 显示可能拉伸,可能裁剪,充满
 
image
BoxFit.fitWidth 显示可能拉伸,可能裁剪,宽度充满
 
image
BoxFit.fitHeight 显示可能拉伸,可能裁剪,高度充满
 
image
BoxFit.none    
BoxFit.scaleDown 效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大
 
image
Image.asset(
AssetImages.demo,
fit: BoxFit.cover,
)

根据我们的理解,第一个参数为图片名字,fit则是这个图片的scaleType。这里的cover相当于centerCrop。问题这时候来了!!划重点!!单独这么写这个Image的话,这个fit参数是不起作用的。因为这个image没有Size,就是里面的heightwidth这俩参数没有。

解决办法:

  • 外面嵌套一层Column(我觉得这种方法有点高射炮打蚊子的感觉。。)
new Column(
children: <Widget>[
new Image.network(
_parties[index]["cover"], fit: BoxFit.fitWidth,
height: 120.0,
),
new Text(_parties[index]['name'])
]
)
  • 直接写上宽和高(前提是你得先知道确切的宽高,比如要全屏显示图片)
Image.asset(
AssetImages.demo,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
fit: BoxFit.cover,
)
  • 外面嵌套BoxConstraints,给Image加约束,让它填充父布局。(本人喜欢这种方式)
ConstrainedBox(
child: Image.asset(
AssetImages.start2,
fit: BoxFit.cover,
),
constraints: new BoxConstraints.expand(),
)

链接:https://www.jianshu.com/p/8810bacfe5d4

flutter图片铺满父框的更多相关文章

  1. ExtJS-Viewport背景图片铺满浏览器视图并自动伸缩

    var viewport = Ext.create('Ext.container.Viewport', { style : 'background-image:url(login_bj.jpg);ba ...

  2. 设置ImageView显示的图片铺满全屏

    转自:http://m.blog.csdn.net/blog/wjwj1203/32334459   为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...

  3. Flutter 图片如何充满父布局

    正常我们需要显示一张图片,会用到Image这个控件.打个比方,我们加载一张本地的图片,先看一下这个Image.asset的源码: Image.asset(String name, { Key key, ...

  4. IE9以下通过css让html页面背景图片铺满整个屏幕

    第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <hea ...

  5. video 铺满父元素(object-fit: fill;)

    遇到这个属性,是在给video 嵌入一个div时,导致video播放器上下有灰色.在控制台查看video默认样式的时候看到了这个属性. 播放器上下的灰色,不是我们想要的样式,如果能完全覆盖就更好了. ...

  6. 移动端设置, mobile , 一张图片作为背景 ,平铺 ,自动拉伸 , 图片 铺满视界 ,窗口. background-image , background-size, background-repeat

    1.  效果: 浏览器: 手机模拟: 2.代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  7. css 设置背景图片铺满固定不动

    #page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); backgroun ...

  8. css 背景图片铺满

    body { width: 100%; height: 100%; background: url(img/loginbg.png); background-size: 100% 100%; back ...

  9. css 设置body背景图片铺满

    background-image: url(../../../assets/images/workflow/work.png); background-repeat: no-repeat; backg ...

随机推荐

  1. C#编程の泛型编程

    什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一个是处理string数据,或者其他自定义的数据类型,但我们没有办法,只能分别写多个方法处理每个数据类型,因为 ...

  2. P2360 地下城主(BFS)

    感觉这道题还是蛮简单的,不过使使用了4个队列(其实只是一个)emmmmm,还是很好的 #include<iostream> #include<string> #include& ...

  3. 1043. 输出PATest(20)

    1043. 输出PATest(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定一个长度不超过10000 ...

  4. [LeetCode]最大系列(最大正方形221,最大加号标志764)

    221. 最大正方形 题目描述: 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 ...

  5. 002_浅析python 中__name__ = '__main__' 的作用

    很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = ...

  6. firewall端口放行

    添加 sudo firewall-cmd --zone=public --add-port=10050/tcp --permanent sudo firewall-cmd --add-port=929 ...

  7. GT--记录android app消耗的cpu/内存/流量/电量

    腾讯GT简介: 此apk是一款可以对APP进行测试的软件,可以在任何情况下快速测试手机app的CPU.内存.流量.电量.帧率/流畅度等性能测试.有安卓版本和ios版本,分别下载 1.下载腾讯GT ht ...

  8. 解决 Vim 的 quickfix 插件错误信息乱码问题

      将以下代码插入 vim 配置文件即可,       function! QfMakeConv()        let qflist = getqflist()        for i in q ...

  9. Debian 8.9 搭建wordpress个人博客

    想自己搭个博客玩玩,就搭建了此博客,过程可谓艰辛啊! 先在阿里云买了个  轻量应用服务器 1个月10块钱,好贵.... 用 windows sever 下载不了phpstudy,也不知道怎么回事... ...

  10. CF176E Archaeology

    CF176E Archaeology 有一棵 \(n\) 个点的带权树,每个点都是黑色或白色,最初所有点都是白色的.有 \(m\) 个询问: 把点 \(x\) 从白色变成黑色 把点 \(x\) 从黑色 ...