Flutter 图片如何充满父布局
正常我们需要显示一张图片,会用到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
,就是里面的height
和width
这俩参数没有。
解决办法:
- 外面嵌套一层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 图片如何充满父布局的更多相关文章
- flutter图片铺满父框
正常我们需要显示一张图片,会用到Image这个控件. 打个比方,我们加载一张本地的图片, 先看一下这个Image.asset的源码: Image.asset(String name, { Key ke ...
- flutter 图片组件
加入图片的几种方式 Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径. Image.network:网络资源图片,意思就是你需要加入一 ...
- flutter图片组件
在flutter中,image组件有很多构造函数,常用的包括Image.asset(本地图片)和Image.network(远程图片). 常用属性 不管是显示本地图片还是远程图片,image组件都包含 ...
- Flutter学习指南:UI布局和控件
Flutter学习指南:UI布局和控件 - IT程序猿 https://www.itcodemonkey.com/article/11041.html
- android控件拖动,移动、解决父布局重绘时控件回到原点
这是主要代码: 保证其params发生改变,相对于父布局的位置就能达到位置移动到原来的位置 // 每次移动都要设置其layout,不然由于父布局可能嵌套listview,当父布局发生改变冲毁(如下拉刷 ...
- chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
1 <div class="container"> <div class="item"> <div class="ite ...
- 73、ImageView 让图片填充满
在xml里的ImageView中设置 android:scaleType="fitXY"属性,这个属性是让图片填充满, 当然你可以去查一下这个scaleType的其他属性,你要 ...
- 迅捷Flutter图片浏览软件
下载地址: https://github.com/patton88/agile_flutter_picture_show/raw/master/agile_flutter_picture_show_v ...
- 纯CSS控制背景图片100%自适应填充布局
https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;marg ...
随机推荐
- sublime自动对齐Alignment插件快捷键
[ { "keys": ["ctrl+alt+f"], "command": "alignment" } ]
- redisTemplate实现轻量级消息队列, 异步处理excel并实现腾讯云cos文件上传下载
背景 公司项目有个需求, 前端上传excel文件, 后端读取数据.处理数据.返回错误数据, 最简单的方式同步处理, 客户端上传文件后一直阻塞等待响应, 但用户体验无疑很差, 处理数据可能十分耗时, 没 ...
- 使用XHProf分析PHP性能瓶颈(一)
安装xhprof扩展 wget http://pecl.php.net/get/xhprof-0.9.4.tgz tar zxf xhprof-0.9.4.tgz cd xhprof-0.9.4/ex ...
- Chapter 3 Phenomenon——20
"All I know is that you weren't anywhere near me — 所有我知道的就是你当时不在我旁边的任何地方—— Tyler didn't see you ...
- 61. 旋转链表-leetcode
给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = 2 输出: 4-& ...
- VIM学习网址和资料收集
摘要:这篇博客主要收集一些学习VIM的好网址和资料 娄老师的一篇VIM 原文地址:http://www.cnblogs.com/rocedu/p/6012444.html Github上VIM的学习 ...
- paxos协议
两将军问题 有两支军队,它们分别有一位将军领导,现在准备攻击一座修筑了防御工事的城市. 这两支军队都驻扎在那座城市的附近,分占一座山头. 一道山谷把两座山分隔开来,并且两位将军唯一的通信方式就是派各自 ...
- Linux-(watch,at,crontab)
watch命令 1.命令格式: watch [参数] [命令] 2.命令功能: 可以将命令的输出结果输出到标准输出设备,多用于周期性执行命令/定时执行命令. watch可以帮你监测一个命令的运行结 ...
- linux下tar gz bz2 tgz z等众多压缩文件的压缩与解压方法
Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...
- 【IT笔试面试题整理】反转链表
[试题描述]定义一个函数,输入一个链表的头节点,反转该链表并输出反转后链表的头节点 [参考代码] 方法一: public static Link reverseLinkList(Link head) ...