Image
- 在
lib
同级文件夹新建assets
资源文件夹 assets
文件夹通常包含fonts
和images
两个文件夹- 如果有@2x或@3x图片怎么办?
- 新建两个文件夹,文件名称分别为2.0x和3.0x,把对应尺寸的图片放到文件夹中,flutter会自动识别并找到对应图片的
- 必须在
pubspec.yaml
配置文件中配置assets
,如下:1
2assets:
- 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毫秒;
图片缓存
- 参考:https://api.flutter.dev/flutter/widgets/image-class.html
- flutter默认会对图片进行缓存的;
- 注意:图片默认最多缓存1000张,总大小100MB(可以调整)
Icon
- Icon继承自
StatelessWidget
,所以Icon是一个Widget; - Icon是字体图标(是一个矢量图,前端开发经常会用到),可以设置颜色和大小,用法和字体几乎无差别;
- 在创建的时候,开发工具可以帮助我们显示对应的图标样式;
既然Icon是一个字体图标,那么可以用Text组件
显示么?当然可以。
Icons.people是一个16进制的IconData
Text组件本质也是让传入一个data,我们把
Icons.people
的十六进制转换成Unicode编码试下(0xe7fb => \ue7fb)表明:在一个字体库、同一个编码下IconData就能使用Text显示