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