Flutter Image组件
Flutter Image组件
1.1 向Flutter项目中添加资源
如何向Flutter项目中添加资源?
- 1.将资源准备好放到目录下,如将图片资源放到 /images 下
- 2.在pubspec.yaml中按照指引添加配置:
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
使用时,通过AssetImage()或者Image.asset()来读取图片,例子如下:
AssetImage('images/image.webp')
Image.asset('images/image.webp')
那么,AssetImage()和Image.asset()有什么区别?
- Image.asset()是对AssetImage()的高级封装,其内部也用到了AssetImage()
- Image.asset()返回的是一个Widget,而AssetImage()不是
- 可以理解为,AssetImage()是一个从本地获取图片文件的类,而Image.asset()可以读取后展示成一个Widget
1.2 Image.asset()或Image.network()中的属性
属性名称 | 介绍 |
---|---|
fit: BoxFit | 对图片填充到容器的方式进行控制 |
repeat: ImageRepeat | 平铺,包括X轴平铺、Y轴平铺等 |
BoxFit属性介绍
BoxFit中可以对图片进行如下控制:
- BoxFit.cover:将图片裁剪后充满整个容器,图片不会变形。
- BoxFit.fill:让图片填充满整个容器,图片可能会变形。
repeat效果:
2.圆形图片
圆形图片实际场景非常常见,实现方式有以下两种:
2.1 通过容器的decoration来实现
通过指定decoration中的borderRadius参数,来改变图片的形状。注意,此时图片加载位置不应该是容器中加载,而是应该在decoration中加载!!!否则decoration的样式无法作用到图片上
代码如下:
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(100.0),
image: const DecorationImage(
image: AssetImage('images/image.webp'),
),
),
效果如下:
2.2 通过ClipOval来实现
child: ClipOval(
child: Image.asset('images/image.webp'),
)
以上部分内容总结自课程 https://www.bilibili.com/video/BV1S4411E7LY
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!