ToB企服应用市场:ToB评测及商务社交产业平台

标题: flutter加载本地图片 [打印本页]
作者: 涛声依旧在    时间: 2022-6-24 17:20
标题: flutter加载本地图片
一、步骤

1.在工程根目录下创建images文件夹，将图片放入该目录中
 
2.在工程pubspec.xml文件中，找到flutter，添加刚才放入的图片
  1. # The following section is specific to Flutter.
  2. flutter:
  4.   # The following line ensures that the Material Icons font is
  5.   # included with your application, so that you can use the icons in
  6.   # the material Icons class.
  7.   uses-material-design: true
  9.   # To add assets to your application, add an assets section, like this:
  10.   assets:
  11.     - images/icon_settings.png
复制代码
3.在代码中加载本地图片，有两种方式
  1. // 方式一
  2. Image(
  3.   image: AssetImage('images/icon_settings.png'),
  4.   width: 24,
  5.   height: 24,
  6. ),
  8. // 方式二
  9. Image.asset('images/icon_settings.png',
  10.   width: 24,
  11.   height: 24,
  12. ),
复制代码
flutter加载本地图片步骤很简单，但里面有许多需要注意的点，不然很容易报错，踩坑 。
二、注意的点

1.在pubspec.yaml文件中添加图片时，由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。即assets要比flutter缩进两格，与上面默认的uses-material-design对齐，缩进格式不对的话会报如下错误：
  1. Error detected in pubspec.yaml:
  2. Error on line 48, column 4: Expected a key while parsing a block mapping.
  3.    ╷
  4. 48 │    assets:
  5.    │    ^
  6.    ╵
复制代码
相信有不少小伙伴是直接使用快捷键取消工程原本模板中的assets内容，就会出现此编译错误，重新对齐编译就好。
注：assets下的图片不需要严格的按照两格的缩进，但是图片前的间隔符-必须要有，并且图片和间隔符至少要有一个空格，不然也会报错：
错误一：
  1.   # To add assets to your application, add an assets section, like this:
  2.   assets:
  3.     images/icon_settings.png
复制代码
错误一报错如下： 
  1. Error detected in pubspec.yaml:
  2. Expected "assets" to be a list, but got images/icon_settings.png (String).
复制代码
错误二：
  1.   # To add assets to your application, add an assets section, like this:
  2.   assets:
  3.     -images/icon_settings.png
复制代码
 错误二报错如下：
  1. Error detected in pubspec.yaml:
  2. Expected "assets" to be a list, but got -images/icon_settings.png (String).
复制代码
不会报错的写法： 
正确一：标准写法
  1.   # To add assets to your application, add an assets section, like this:
  2.   assets:
  3.     - images/icon_settings.png
复制代码
正确二：间隔符-比assets缩进三格
  1.   # To add assets to your application, add an assets section, like this:
  2.   assets:
  3.      - images/icon_settings.png
复制代码
正确三：间隔符-后两个空格
  1.   # To add assets to your application, add an assets section, like this:
  2.   assets:
  3.     -  images/icon_settings.png
复制代码
正确四：间隔符-比assets缩进三格，并且后两个空格
  1.   # To add assets to your application, add an assets section, like this:
  2.   assets:
  3.      -  images/icon_settings.png
复制代码
建议大家都采用标准写法，避免出现错误找不到地方，同时也保证了代码规范~
2.pubspec.yaml文件assets声明时、代码中使用图片时，要确保图片名称及后缀都与images目录下图片名称及后缀保持一致，由于flutter在引用资源时不会有代码智能提示，资源都得手动写入，比较容易出现文件名书写错误的问题。图片的后缀类型如png也必须加上。
建议大家images下的图片名称采用全小写加下划线的方式书写（如：icon_settings.png），然后复制图片的全名称（图片名+类型）添加到yaml文件和代码文件中。
3.images目录下可以再创建子目录，子目录里的图片在声明或加载时要写全路径：

yaml中声明：
  1.   # To add assets to your application, add an assets section, like this:
  2.   assets:
  3.     - images/me/icon_avatar.png
  4.     - images/icon_settings.png
复制代码
 代码中加载：
  1. // 方式一
  2. Image(
  3.   image: AssetImage('images/me/icon_avatar.png'),
  4.   width: 24,
  5.   height: 24,
  6. ),
  8. // 方式二
  9. Image.asset('images/me/icon_avatar.png',
  10.   width: 24,
  11.   height: 24,
  12. ),
复制代码
小技巧：yaml文件中声明图片时，可以只声明目录，这样目录下所有的图片都会被声明，不用再麻烦声明每一个图片：
  1.   # To add assets to your application, add an assets section, like this:
  2.   assets:
  3.     - images/me/
复制代码
 注意，只声明目录时，后面的反斜杠/必须带上，否则会报如下错误：
  1. Error detected in pubspec.yaml:
  2. No file or variants found for asset: images/me.
复制代码
4. 加载项目中所有第三方依赖包中的本地图片时，需要在代码中添加包名；而加载项目自身的本地图片时，则不需要添加包名。不按要求都会报错！！！
  1. // 加载自身的图片，不需要加package包名
  2. Image.asset('images/icon_settings.png',
  3.   width: 24,
  4.   height: 24,
  5. ),
  7. // 加载依赖包中的图片，需要加package包名
  8. Image.asset('images/icon_share.png',
  9.   width: 24,
  10.   height: 24,
  11.   package: 'com.xxx.xxx', //正确的依赖包包名
  12. ),
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4