第六回：如何使用Image Widget

我们在上一章回中介绍了ListView Widget,本章回中将介绍 Image这种Widget，闲话休提，让我们一起Talk Flutter吧。

概念介绍

在Flutter中Image Widget主要用来显示图片，和Andrid中的ImageView,IOS中的UIImageView的作用相同。本章回中将介绍如何使用这种Widget.

使用方法

1. 在项目中创建图片目录，并且在该目录下放一张图片；
2. 创建Image对象，使用Image类的构造方法就可以；
3. 通过AssetImage对象获取项目中某个位置的图片，并且将它赋值给Image对象；

示例代码

    Widget imageEx = Container(
      width: 300,
      height: 200,
      color: Colors.blue[300],
      child: Row(
        children: const [
          Image(image: AssetImage("images/ex.png"),),
        ],
      ),
    );

上面的代码中使用了前面章回中介绍过的Container和Row widget,我们在它们的基础上添加了Image Widget.这里重点说一下如何加载项目中具体位置中的图片。

首先需要在配置文件中创建图片目录，然后把图片复制到该目录下就可以。配置文件(pubspec.yaml)中的内容如下：

  assets:
  - images/ex.png

注意：在使用图片时只需要图片的相对位置就可以，配置文件中的图片目录也是相对路径，这个路径和配置文件位于相同目录下。

把上面的代码添加到我们创建的MaterialApp中就可以运行，运行程序时会显示一张图片，我在这里就不演示程序运行结果了，下面是MaterialApp的代码：

  return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primaryColor: Colors.blue),

        home: Scaffold(
            appBar: AppBar(
              title: const Text("Title of Hello App"),
            ),
            body: Column(
              children: [
                wechatBottom,
                imageEx,
              ],
            )
        )
    );

看官们，关于Image Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!