【Flutter 2-6】Flutter手把手教程UI布局和Widget——Image控件、NetworkImage、AssetImage
作者 | 弗拉德
来源 | 弗拉德(公众号:fulade_me)
Image是一个常用的控件,它可以帮助我们显示图片,图片的资源可以是来自网络、本地或者是内存。在移动端的开发中会大量使用Image来展示一些图文,了解和掌握Image控件是非常有必要的。
AssetImage 和 Image.asset
AssetImage
是Flutter提供的一个可以从本地读取图片资源的类,我们可以使用它来读取图片。同样Flutter还提供了Image.asset
这个构造方法直接来帮助我们读取图片资源并返回一个Image对象。其实Image.asset
是对AssetImage
一层更高级的封装。
注意:要读取本地图片我们首先需要在
pubspec.yaml
文件里配置本地图片资源的路径,我们这里在assets
这个字段下新增了- images/image_demo.jpg
这个文件。后续将会有一篇专门的博客来讲解资源的管理。
1. AssetImage
Image(image: AssetImage("images/image_demo.jpg"),width: 80,height: 80,
)
2. Image.asset
Image.asset("images/image_demo.jpg",width: 80,height: 80,
)
两个方法都是传入一个本地文件路径就可以了。
NetworkImage 和 Image.network
NetworkImage
是一个可以从网络下载图片的类,它本身是异步的。Image.network
是对NetworkImage
的封装,它需要传入一个URL地址就可以返回一个Image对象。这两个的设计跟AssetImage
和Image.asset
的设计基本一致。
3. NetworkImage
Image(image: NetworkImage("http://www.fulade.me/img/avatar.jpg"),width: 80,height: 80,
)
4. Image.network
Image.network("http://www.fulade.me/img/avatar.jpg",width: 80,height: 80,
)
Alignment
alignment
是Image的一个很重要的参数,它可以帮助我们设置图片的位置。有以下几个枚举值
参数 | 描述 |
---|---|
topCenter | 居中靠上 |
topRight | 右上角 |
centerLeft | 居中靠左 |
center | 居中 |
centerRight | 居中靠右 |
bottomLeft | 居右下角 |
bottomCenter | 居中靠下 |
bottomRight | 居右下角 |
BoxFit
fit
参数是很重要的布局参数,当我们的图片内容跟Image设置的大小不完全吻合的时候,fit
的参数值BoxFit
可以帮助我们做最优的调整和显示
5. BoxFit.contain
fit
的默认值是BoxFit.contain
。由下图我们不难看出,BoxFit.contain
会等比例缩放,保持图片的原始的比例并且显示在Image内。
6. BoxFit.fill
由图可见BoxFit.fill
会充满整个容器,如果图片大小与容器不完全吻合,可能会出现拉伸。
7. BoxFit.cover
BoxFit.cover
会保持图片资源的大小,如果超过的部分会被裁掉不会显示。
8. BoxFit.fitWidth
BoxFit.fitWidth
会使宽度充满整个容器,高度会按比例缩放,图片不会被拉伸,超出容器的部分会被剪裁。
9. BoxFit.fitHeight
BoxFit.fitHeight
跟BoxFit.fitWidth
相似,高度会充满整个容器,宽度会按比例缩放,图片不会被拉伸,超出容器的部分会被剪裁。
10. BoxFit.none
none表示没有设置显示策略,以原始大小居中来显示。
11. BoxFit.scaleDown
当图片资源大于容器的时候,效果相当于 BoxFit.none
,
当组件比图片小时,效果相当于 BoxFit.contain
。
对于加载过的图片Flutter是会帮助我们做内存缓存,最大缓存数量是1000,最大缓存内存空间是100M。
想体验以上的示例的运行效果,可以到我的Github仓库项目flutter_app
->lib
->routes
->image_page.dart
查看,并且可以下载下来运行并体验。
【Flutter 2-6】Flutter手把手教程UI布局和Widget——Image控件、NetworkImage、AssetImage相关推荐
- SAP UI5 应用开发教程之六十 - SAP UI5 地图控件的一些高级用法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
- 第31讲 UI组件之 Gallery画廊控件
第31讲 UI组件之 Gallery画廊控件 1.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery只 ...
- LinearLayout布局中如何让控件置底
记得刚学习android UI的时候,让控件置底只会使用Relativelayout,有时候会让整体布局很不方便,LinearLayout布局置底的方法很简单,在此只是望和我一样的一些新手,少走些弯路 ...
- Android 软键盘弹出时把布局顶上去,控件乱套解决方法
Android 软键盘弹出时把布局顶上去,控件乱套解决方法 参考文章: (1)Android 软键盘弹出时把布局顶上去,控件乱套解决方法 (2)https://www.cnblogs.com/zhuj ...
- HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用
Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...
- android怎么查看方法被谁调用,Android中查看布局文件中的控件(view,id)在哪里被调用(使用)...
在阅读别人的代码时通常是很痛苦的,有时很想要看一看布局中的控件在哪里被调用了,为之很苦恼 在这里提供一种方法. 复制要查看的控件ID,到R文件中搜索到该ID, 接下来就好办的了,选中ID按下Ctrl鼠 ...
- qt 从布局中删除子控件
一.坑的现象 只是简单的将子控件从父窗口的布局中移除,出现内存泄露 二.遇坑的原因 从布局中移除控件,只是子控件不在布局中显示,子控件的内存实际并未释放 三.正确写法 void deleteItem( ...
- Panuon.UI.Silver – 开源C# WPF控件库
Panuon.UI.Silver – 开源C# WPF控件库 Dotnet9 • 2019年12月13日 22:55 • WPF • 阅读 12145 时间如流水,只能流去不流回! 点赞再看,养成习惯 ...
最新文章
- Vsftpd 服务的部署及优化
- spark的foreach(println)看不到输出结果
- 黄页前台联动菜单修改时不能显示,要重新选择|没样式
- Books Queries(codeforces 1066)
- winform 鼠标 静止时间_赢得电竞的奥秘,你需要一块好鼠标垫
- java io流读取txt文件_Java使用IO流读取TXT文件
- ortp流媒体协议 [1]
- setTimeout、setInterval解刨
- TeamCity+Rancher+Docker实现.Net Core项目DevOps(目前成本最小的DevOps实践)
- Postman的新手教学,一学就会!
- 【论文写作】毕业论文写作套路之正文(1)
- 你想学的都在这里!传智播客java就业班教程
- wps是计算机应用软件吗,wps word属于什么软件
- WinHex自定义模板
- UWP的一种下拉刷新实现
- 华为鸿蒙家电物联网,华为“鸿蒙”来了:本身是为了做物联网,将比安卓速度快60%...
- DP(Nietzsche)的hu测 T1(状压dp)
- ADCLK905调试
- Axure 取色器的使用
- MOOC战德臣数据库课程自用笔记_2_关系模式