正常我们需要显示一张图片,会用到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://cloud.tencent.com/developer/support-plan?invite_code=2bwjo723g1z4g

Flutter 图片如何充满父布局的更多相关文章

  1. flutter图片铺满父框

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

  2. flutter 图片组件

    加入图片的几种方式 Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径. Image.network:网络资源图片,意思就是你需要加入一 ...

  3. flutter图片组件

    在flutter中,image组件有很多构造函数,常用的包括Image.asset(本地图片)和Image.network(远程图片). 常用属性 不管是显示本地图片还是远程图片,image组件都包含 ...

  4. Flutter学习指南:UI布局和控件

    Flutter学习指南:UI布局和控件 - IT程序猿  https://www.itcodemonkey.com/article/11041.html

  5. android控件拖动,移动、解决父布局重绘时控件回到原点

    这是主要代码: 保证其params发生改变,相对于父布局的位置就能达到位置移动到原来的位置 // 每次移动都要设置其layout,不然由于父布局可能嵌套listview,当父布局发生改变冲毁(如下拉刷 ...

  6. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  7. 73、ImageView 让图片填充满

    在xml里的ImageView中设置   android:scaleType="fitXY"属性,这个属性是让图片填充满, 当然你可以去查一下这个scaleType的其他属性,你要 ...

  8. 迅捷Flutter图片浏览软件

    下载地址: https://github.com/patton88/agile_flutter_picture_show/raw/master/agile_flutter_picture_show_v ...

  9. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

随机推荐

  1. odoo开发笔记--工作流

    虽然odoo10里边取消了工作流 Odoo Workflow http://www.jeffzhang.cn/Odoo-Workflow-Notes/

  2. Linux在终端和控制台下复制粘贴命令快捷键

    1.在终端下: (1)复制命令:Ctrl + Shift + C 组合键. (2)粘贴命令:Ctrl + Shift + V 组合键. 2.在控制台下:(即vi编辑过程中) (1)复制命令:Ctrl ...

  3. Python中Gradient Boosting Machine(GBM)调参方法详解

    原文地址:Complete Guide to Parameter Tuning in Gradient Boosting (GBM) in Python by Aarshay Jain 原文翻译与校对 ...

  4. ABP集成WIF实现单点登录

    ABP集成WIF实现单点登录 参考 ojlovecd写了三篇关于WIF文章. 使用WIF实现单点登录Part III —— 正式实战 使用WIF的一些开源示例. https://github.com/ ...

  5. 搭建Golang开发环境

    Go语言是谷歌 2009 年首次推出并在 2012 年正式发布的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性.谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 ...

  6. 全网最详细的PLSQL Developer + Oracle client的客户端 或者 PLSQL Developer + Oracle server服务端的下载与安装过程(图文详解)

    不多说,直接上干货! 环境说明: 本地没有安装Oracle服务端,oracle服务端64位,是远程连接,因此本地配置PLSQL Developer64位. Oracle database使用在本机部署 ...

  7. Kafka中的zookeeper-shell.sh

    连接 zookeeper bin/zookeeper-shell. 常用命令 connect host:port get path [watch] ls path [watch] set path d ...

  8. Vue2.0-token权限处理

    token一种身份的验证,在大多数网站中,登录的时候都会携带token,去访问其他页面,token就想当于一种令牌.可以判断用户是否登录状态.本次页面是通过Element-ui搭建的登录界面 当用户登 ...

  9. vue2.0和better-scroll实现左右联动效果

    在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果. 实现上面的效果,思路一定很重要,还有需求 1. 左边一级分类 ...

  10. 简单实现Spring框架--注解版

    自己写的Spring框架——简单实现IoC容器功能 前几天在网上看了篇帖子,是用xml的方式实现spring的ioc容器,觉得挺有意思的,这边自己试着用注解的形式造了一套轮子. 工程结构 codein ...