Flutter实战入门
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.1.3　图片组件（Image）

Image组件用于显示图片，可以加载网络上、项目中或者设备上的图片，Image组件常用属性参见表3-5。

表3-5　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-8所示。

图3-8　加载项目中的图片

3.加载手机SD卡上的图片

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

图3-9　添加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" />

效果如图3-10所示。

图3-10　添加读写权限

对于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,
        )
上一章目录下一章