Flutter入门（9）：Flutter 组件之 Image、AssetImage 详解

1. 基本介绍

Image 组件非常常用，用来加载图片（本地图片和网络图片）。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. AssetImage 创建、导入、使用

3.1 资源文件创建

我们现在根目录下创建 images 文件夹。

image asset.png

3.2 资源文件导入

我们创建了一个 base_widgets 的子文件夹，在这里存放 base_widgets 项目里需要使用的图片。
我这里下载了3个星星图片，分别为 star_black.png, [email protected], [email protected]，将 star_black.png 图片直接放入 base_widgets 文件夹下，[email protected] 放在 base_widgets/2.0x 文件夹下，[email protected] 放在 base_widgets/3.0x 文件夹下。
Flutter 会根据需要自动使用对应分辨率图片。

3.3 资源文件使用

Flutter 使用资源文件，必须依赖 pubspec.yaml 文件。

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/base_widgets/star_black.png

注意：这里会比较坑，有时候会莫名其妙的报错。检查一下 assets 的首行缩进，assets 前边是2个英文空格，- images/... 前边是4个英文空格。

images format.png

4. Image 组件

4.1 基本创建方式

• Image：通过ImageProvider来加载图片
• Image.asset：用来加载本地资源图片
• Image.file：用来加载本地（File文件）图片
• Image.network：用来加载网络图片
• Image.memory：用来加载Uint8List资源（byte数组）图片

4.2 容器创建

优雅的编程，首先创建一个 image.dart 文件。我们先给本地图片创建一个30 * 60 的占位框，然后在这些框内展示一下图片的不同拉伸方式。

import 'package:flutter/material.dart';

class FMImageVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Image",
          ),
          backgroundColor: Colors.lightBlue,
        ),
        body: Container(
          color: Colors.grey,
          child: _listview(),
        ),
      ),
    );
  }

  ListView _listview(){
    return ListView(
      padding: const EdgeInsets.all(30),
      children: [
        Text("本地图片"),
        Container(
          height: 150,
          child: _localRow(),
        ),
      ],
    );
  }

  Row _localRow(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
        ),
      ],
    );
  }
}

image local background.png

4.2 本地图片的加载以及不同的 fit 方式

  Row _localRow(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image.asset(
            'images/base_widgets/star_black.png', fit: BoxFit.none,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.fill,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.cover,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.contain,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.fitHeight,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.fitWidth,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.scaleDown,
          ),
        ),
      ],
    );

image local.png

4.3 网络图片使用

  ListView _listview(){
    return ListView(
      padding: const EdgeInsets.all(30),
      children: [
        Text("本地图片"),
        Container(
          height: 150,
          child: _localRow(),
        ),
        Text("网络图片"),
        Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
      ],
    );
  }

image network.png

4.4 加载带占位图的网络图片

4.4.1 FadeInImage.assetNetwork 使用本地占位图加载图片

  ListView _listview(){
    return ListView(
      padding: const EdgeInsets.all(30),
      children: [
        Text("本地图片"),
        Container(
          height: 150,
          child: _localRow(),
        ),
        Text("网络图片"),
        Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
        Text("带占位图的网络图片，成功加载"),
        FadeInImage.assetNetwork(
          placeholder: 'images/base_widgets/star_black.png',
          image: 'http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg',
          fit: BoxFit.fill,
        ),
      ],
    );
  }

image network asset success

4.4.2 FadeInImage.memoryNetwork 使用第三方 package 加载透明占位图

安装第三方 package，安装教程-第5项
我们把第三方库换成如下所示transparent_image

dev_dependencies:
  flutter_test:
    sdk: flutter
  transparent_image: ^1.0.0

安装完成后

import 'package:transparent_image/transparent_image.dart';

  ListView _listview(){
    return ListView(
      padding: const EdgeInsets.all(30),
      children: [
        Text("本地图片"),
        Container(
          height: 150,
          child: _localRow(),
        ),
        Text("网络图片"),
        Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
        Text("带占位图的网络图片，成功加载"),
        FadeInImage.assetNetwork(
          placeholder: 'images/base_widgets/star_black.png',
          image: 'http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg',
          fit: BoxFit.fill,
        ),
        FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: 'http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg',
        ),
      ],
    );
  }

image network success.png

4.4.3 网络图片加载失败

我们把4.4.2中的网络图片的URL分别删除和给一个错误的URL，看一下效果。

  ListView _listview(){
    return ListView(
      padding: const EdgeInsets.all(30),
      children: [
        Text("本地图片"),
        Container(
          height: 150,
          child: _localRow(),
        ),
        Text("网络图片"),
        Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
        Text("带占位图的网络图片，成功加载"),
        FadeInImage.assetNetwork(
          placeholder: 'images/base_widgets/star_black.png',
          image: 'http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg',
          fit: BoxFit.fill,
        ),
        FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: 'http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg',
        ),
        Text("带占位图的网络图片，加载失败"),
        FadeInImage.assetNetwork(
          placeholder: 'images/base_widgets/star_black.png',
          image: '',
          fit: BoxFit.fill,
        ),
        FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: 'http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f.jpg',
        ),
      ],
    );
  }

image network failure.png

5. 技术小结

• Image 的导入以及引用。
• Image 组件中使用本地图片。
• Image 组件中使用网络图片。
• Image 组件中使用占位图。