我们在上一章回中介绍了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的内容就介绍到这里，欢迎大家在评论区交流与讨论!

互联网百科