【Flutter】图片组件注意事项

Image

  • lib同级文件夹新建assets资源文件夹
  • assets文件夹通常包含fontsimages两个文件夹
  • 如果有@2x或@3x图片怎么办?
    • 新建两个文件夹,文件名称分别为2.0x和3.0x,把对应尺寸的图片放到文件夹中,flutter会自动识别并找到对应图片的
  • 必须在pubspec.yaml配置文件中配置assets,如下:
    1
    2
    assets:
    - assets/images/
  • 新建工程时,系统默认把assets相关配置注释掉,我们只需要把注释打开然后修改为我们需要的路径即可;
  • 注意点:assets前面一定不要有空格,否则打包会报错;
  • 最后点击Android Studio上面的Packages get

使用图片Widget有时候让传ImageProvider类型,有时候让传一个Widget,怎么区分呢?

ImageProvider

NetworkImage
AssetImage
FileImage

Widget

Image.network
Image.asset

  • 可以看出Image.*基本上都是继承自Widge
  • *Image基本上是ImageProvider类型

图片占位图(FadeInImage)

  • 当网络图片加载完成前优先显示一张默认图片;
  • 使用FadeInImage进行图片显示的时候会有一个动画过程,可以通过属性设置动画时间;
  • fadeOutDuration动画时间默认300毫秒,fadeInDuration动画时间默认700毫秒;

图片缓存

Icon

  • Icon继承自StatelessWidget,所以Icon是一个Widget;
  • Icon是字体图标(是一个矢量图,前端开发经常会用到),可以设置颜色和大小,用法和字体几乎无差别;
  • 在创建的时候,开发工具可以帮助我们显示对应的图标样式;

既然Icon是一个字体图标,那么可以用Text组件显示么?当然可以。

  • Icons.people是一个16进制的IconData

  • Text组件本质也是让传入一个data,我们把Icons.people的十六进制转换成Unicode编码试下(0xe7fb => \ue7fb)

  • 表明:在一个字体库、同一个编码下IconData就能使用Text显示