Flutter中的 Image图片组件的详解

介绍：

Image 图片组件是用来显示图像的组件，Image 组件有很多构造函数（命名构造函数）

如：

Image.file：从文件获取图片
Image.asset： 本地图片
Image.network：从网络加载
Image.memory：

官方介绍截图如下：

以下只对Image.network和Image.asset进行讲解：

一.Image 组件的常用属性

属性名称	类型	说明
alignment	Alignment	图片的对齐方式
color和colorBlendMode		设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合
fit	BoxFit	fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。 BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 BoxFit.contain:全图显示，显示原比例，可能会有空隙。 BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。湖北众猿腾网络科技有限公司 BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。 BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。 BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeat	ImageRepeat	ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。 ImageRepeat.repeatX: 横向重复，纵向不重复。 ImageRepeat.repeatY：纵向重复，横向不重复。 width  宽度一般结合 ClipOval 才能看到效果 height  高度一般结合 ClipOval 才能看到效果
width		宽度一般结合 ClipOval 才能看到效果
height		高度一般结合 ClipOval 才能看到效果

二.使用Image.network 构造函数的Image组件

        Image.network 是用来加载网络图片的，在源码中可以看到Image.network构造函数的src参数不为可选命名参数，所以在调用这一个image.network（）构造函数的时候，src是为必传参数，src为图片的网址。

例子：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//Image图片组件讲解

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is a demo'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      child: Image.network(
        "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4206390884,2201274564&fm=111&gp=0.jpg",
        alignment: Alignment.center,
        //横向拉伸
        fit: BoxFit.fitWidth,
      ),
      color: Colors.yellow,
      height: 400,
    ));
  }
}

 效果：

三.使用Image.asset 构造函数的Image组件

      Image.asset是用来加载本地资源图片的，在源码中可以看到 Image.asset构造函数的name参数不为可选命名参数，所以在调用这一个image.network（）构造函数的时候，name是为必传参数，name为图片的地址。

配置本地资源图片的步骤：

1）在根目录创建images文件夹 ，在images文件夹下创建 名为2.0x和3.0x的文件夹（还可以添加4.0x文件夹等，2.0x和3.0x是必须创建的目录）， 在2.0x和3.0x文件夹中放入相同的图片（系统会根据手机的分辨率选择对应文件夹中的图片资源）。

如图：

    2）在pubspec.yaml文件的flutter 下面添加图片地址

如图（注意空格）:

此时就配置好了图片，可以在代码里使用了。

例子：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//Image图片组件讲解

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is a demo'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.blue),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      child: Image.asset(
//        "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4206390884,2201274564&fm=111&gp=0.jpg",
       "images/image01.jpeg",
        alignment: Alignment.center,
        //横向拉伸
        fit: BoxFit.fitWidth,
      ),
      color: Colors.yellow,
      height: 400,
    ));
  }
}

效果：

四.使用圆形图片

        要实现加载图片后圆形显示（类似头像的效果），有两种方式：

方法1： 使用Container组件，并使用Container中的decoration参数

方法2： 使用ClipOval组件

方法一代码例子：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//Image图片组件讲解(圆形图片)

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is a demo'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      decoration: BoxDecoration(                                          //使用了decoration参数
          borderRadius: BorderRadius.circular(150),                       //设置弧度
          image: DecorationImage(
              image: NetworkImage(
                  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1488907392,4056383417&fm=26&gp=0.jpg'),
              fit: BoxFit.cover)),
          height: 300,
          width: 300,
        )
    );
  }
}

方法二代码例子：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//Image图片组件讲解(圆形图片)

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is a demo'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
        child: ClipOval(                                             //使用ClipOval控件
          child: Image.network(
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1488907392,4056383417&fm=26&gp=0.jpg',
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
        )
    );
  }
}

效果：