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

posted @   KindBrave  阅读(54)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示