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

  1. Image.asset(String name, {
  2. Key key,
  3. AssetBundle bundle,
  4. double scale,
  5. this.width,
  6. this.height,
  7. this.color,
  8. this.colorBlendMode,
  9. this.fit,
  10. this.alignment: Alignment.center,
  11. this.repeat: ImageRepeat.noRepeat,
  12. this.centerSlice,
  13. this.matchTextDirection: false,
  14. this.gaplessPlayback: false,
  15. String package,
  16. }) : image = scale != null
  17. ? new ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
  18. : new AssetImage(name, bundle: bundle, package: package),
  19. assert(alignment != null),
  20. assert(repeat != null),
  21. assert(matchTextDirection != null),
  22. 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
  1. Image.asset(
  2. AssetImages.demo,
  3. fit: BoxFit.cover,
  4. )

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

解决办法:

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

链接: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. nginx学习笔记(三)

    浏览器缓存

  2. 深入解读RabbitMQ工作原理及简单使用

    RabbitMQ系列目录 RabbitMQ在Ubuntu上的环境搭建 深入解读RabbitMQ工作原理及简单使用 Rabbit的几种工作模式介绍与实践 Rabbit事务与消息确认 Rabbit集群搭建 ...

  3. leetcode 344. Reverse String 、541. Reverse String II 、796. Rotate String

    344. Reverse String 最基础的旋转字符串 class Solution { public: void reverseString(vector<char>& s) ...

  4. CRectTracker类的使用

    CRectTracker(俗称“橡皮筋”类)是一个非常有意思的类.你在Windows中经常看到这样的情况:它可以用做显示边界,你也可以扽它的八个角用来放大缩小,或做框选使用.如何通过编程来实现这种功能 ...

  5. odoo11登录之后返回的session信息分析

    { "id": null, "jsonrpc": "2.0", "result": { "web_tours& ...

  6. 蓝牙BLE设备主机重启回连流程分析

    如果一个BLE设备已经与蓝牙中心设备连接上,那么当中心设备的断电重启,其依然会和配对过的BLE设备连接上,而不需要重新走配对的流程,这个过程叫做回连. 这篇文章就分析一下当中心设备断电重启之后,其与B ...

  7. Winform开发框架中的综合案例Demo

    在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用, ...

  8. el-date-picker 快捷日期简单计算

    const oneDaySeconds = 3600 * 1000 * 24 pickerOptions: { shortcuts: [ { text: '今天', onClick(picker) { ...

  9. Ubuntu 18.04 根目录为啥只有 4G 大小

    其实准确点儿的描述应该是:Ubuntu Server 18.04 ,设置 LVM,安装完成后根目录的容量为什么只有 4G?只有 Server 版有问题,Desktop 版没有问题,Ubuntu 16. ...

  10. 基于node.js的博客搭建

    一个博客应当具备哪些功能? 前台展示 点击下一页,可以点击分类导航. 可以点击进入到具体博文页面 下方允许评论.显示发表时间.允许留言分页. 右侧有登录注册界面. 后台管理 管理员账号:登陆后看到页面 ...