Flutter图片组件(Image)

Flutter图片组件(Image)，Image组件用于显示图片，可以加载网络上、项目中或者设备上的图片。酷客教程Flutter 图片组件已经有做介绍，本文再做补充。

Image组件常用属性参如表所示：

1.加载网络图片

加载网络图片代码如下：

Image.network(
'图片网络地址',
width: 200,
height: 200,
  )

使用Image控件的时候一般要指定width、height属性，如果不指定控件大小，Image控制的大小依赖图片大小。

2.加载项目中的图标
在根目录下创建assets/icons文件夹，此文件夹保存项目图标，将图片flutter_icon.png拷贝到此目录，打开pubspec.yaml文件，将如下代码添加到flutter下：

assets:
  - assets/icons/

如下所示：

如果编译不过（基本都会遇到），出现如下错误提示，检查assets前面是否有空格，如果有则去掉，将assets和uses-material-design对齐即可：

加载图片代码如下：

Image.asset(
'assets/icons/flutter_icon.png',
width: 200,
height: 200,
  )

运行效果如图所示：

3.加载手机SD卡上的图片
要想加载手机SD卡上的图片，首先要获取图片的路径，但Android和iOS系统路径不同，因此获取不同设备上的路径需要原生开发支持，只有原生应用才能获取当前设备的路径。这里依赖第三方库（path_provider）获取路径，在pubspec.yaml中添加path_provider依赖，如图所示。

添加后点击右上角的Packages get按钮即可使用path_provider的插件。path_provider有两个获取路径的接口，如下所示：

Directory tempDir = await getTemporaryDirectory();
String tempPath = tempDir.path;

Directory appDocDir = await getApplicationDocumentsDirectory();
String appDocPath = appDocDir.path;

String storageDir = (await getExternalStorageDirectory()).path;

对于Android系统，各个接口路径如下:

·appDocDir：/data/user/0/[app package name]/
·tempDir：/data/user/0/[app package name]/cache
·storageDir：/storage/emulated/0/

Android系统加载SD卡图片需要读写权限，需要在android/app/src/main/Android-Manifest.xml中添加读写权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

效果如图所示：

对于Android 6.0及以上系统，“读写权限”需要动态申请，用户通过后才能使用，动态申请权限涉及原生开发。也可以手动打开“读写”权限，打开“手机设置→应用和通知→Flutter App→权限”，将读写权限打开即可。将flutter_app.png图片保存到Android手机的根目录，获取图片的路径代码如下：

String _storageDir = '';

  _getLocalFile() async {
String storageDir = (await getExternalStorageDirectory()).path;
setState(() {
  _storageDir = storageDir;
});
return storageDir;
  }

Image加载图片如下所示：

Image.file(
  File('$_storageDir/flutter_app.png'),
  width: 200,
  height: 200,
)

酷客网相关文章：

• Flutter文本输入组件(TextField)
• Flutter文本组件(Text)
• Flutter组件大全
• Flutter Web 支持现已进入稳定版