Flutter入门进阶之旅（五）Image Widget

往期专题回顾：

前面咱们学习了Flutter中用于文本显示的Widget，好比咱们显示一行或者一段基本文字会用到Text Widget，若是须要跟Text设置样式，颜色等属性，咱们能够经过给Text指定style来定制TextStyle中的样式来展现咱们须要的效果，对于文本输入控件，咱们学习了TextField，了解到能够经过TextField完成简单的文本输入需求，能够经过InputDecoration给输入框添加样式，好比舒服辅助提示、边框、两边的icon等等。

今天咱们来学习一下另一个Widget---Image，顾名思义Image是用于展现图片的控件，他跟Text同样，同属于StatelessWidget，关于StatelessWidget跟StatefullWidget我会在稍后的文章中具体讲解，在此读者可暂且忽略这一知识点，在作原生Android开发时，咱们能够给ImageView指定不一样的图片来源，能够是来源网络、drawable、bitmap、文件等，在Flutter中一样支持加载不一样来源的图片，只不过Flutter加载不一样资源的图片跟原生Android稍微有点差异，下面咱们一块儿进入本期的主题。

Flutter加载不一样资源图片的方式：

• new Image, 用于从ImageProvider获取图像。
• new Image.asset, 用于从AssetBundle获取图像。
• new Image.network, 用于从URL获取图像。
• new Image.file, 用于从文件中获取图像。
• new Image.memory, 用于从内存中获取图像

在flutter中Image支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP这几种图片格式。

1. 从网络加载图片：

为了养成良好的代码阅读习惯，咱们仍是先来看下Image.network的构造方法

Image.network(String src, {
    Key key,
    double scale: 1.0,//缩小倍数
    this.width,//宽
    this.height,//高
    this.color,
    this.colorBlendMode,
    this.fit, //填充方式
    this.alignment: Alignment.center,
    this.repeat: ImageRepeat.noRepeat, //图片排列方式
    this.centerSlice,
    this.matchTextDirection: false,
    this.gaplessPlayback: false,
    Map<String, String> headers,
  })
复制代码

经过构造方法，咱们能够初步清楚的了解到在Flutter中加载网络图片，只须要在Image.network中指定图片的src，也就是目标图片的url便可，若是须要配置图片宽高、缩放比对应构造方法去写就好，下面实例代码，展现了从目标url上加载图片，而且把图片的宽高设置为500*500；

效果图：

示例代码：

import 'package:flutter/material.dart';
 
void main() {
  runApp(new MaterialApp(home: new ImageDemo()));
}
 
class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new TextField(
          decoration: new InputDecoration(),
        ),
      ),
      body: new Image.network("https://p1.ssl.qhmsg.com/dr/220__/t01d5ccfbf9d4500c75.jpg",width:500,height: 500,)
    );
  }
}
复制代码

2. 从项目本地目录加载图片：

Flutter中加载项目目录下的图片，须要咱们先从pubspec.yaml中声明导入资源后，才能在dart文件中使用图片资源，否则即便图片存在项目目录下，在dart文件中你指定路径后也不能正常加载，这点读者应注意一下，跟咱们写原生Android有点不一样。

好比我在项目中把images文件夹下的两张图片aaa.png、a.png经过pubspec.yaml导入到项目中：

把上述代码中body部分换成Image.asset方式。

body: new Image.asset('images/aaa.png',width: 500,height: 500,)
复制代码

关于Image.asset的构造方法跟network大同小异，我就不贴出来了，读者可自行查阅源码，下面看下咱们从项目目录下加载的图片结束咱们本期关于Image的学习。

效果图：