Flutter基础：第四节 Image 组件的使用

                                        第四节 Image 组件的使用

 

注：图片素材来自网络，如有侵权，敬请告知，立即删除

在项目中，图片的使用是必不可少的。这一节我们学习一下Image的使用。

一、加载图片的四种方法

• Image.asset:加载资源图片，加载项目资源文件中的图片。
• Image.network:加载网络资源图片，需要加入图片网址（http://xx.xx）。
• Image.file:加载本地文件中的图片，需要填写绝对路径。
• Image.memory: 加载Uint8List资源图片。

接下来，我们以加载网络为例，来进行演示。我们从网上找到一张图片，网址为http://file02.16sucai.com/d/file/2015/0408/779334da99e40adb587d0ba715eca102.jpg

然后，我们通过Image来加载这张图片。

代码如下：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "Hello World",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello world"),
        ),
        body: new Container(
          child: new Image.network(
              "http://file02.16sucai.com/d/file/2015/0408/779334da99e40adb587d0ba715eca102.jpg"),
        ),
      ),
    );
  }
}

 效果图：

 

 

二、fit属性

fit：控制图片的拉伸和挤压。

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器（图片可能会变形）。

• BoxFit.contain:全图显示，显示原比例，可能有空隙。

• BoxFit.cover：图片充满整个容器，并且不变形。可能拉伸、裁剪。

• BoxFit.fitWidth：横向充满，可能拉伸或裁剪。

• BoxFit.fitHeight ：竖向充满,可能拉伸或裁剪。

• BoxFit.scaleDown：效果和contain类似。注：此属性不允许显示超过源图片大小，只能小，不能大。

以BoxFit.cover为例，代码如下：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "Hello World",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello world"),
        ),
        body: new Container(
          width: 400.0,
          height: 200.0,
          child: new Image.network(
            "http://a0.att.hudong.com/16/12/01300535031999137270128786964.jpg",
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

 效果图：

 

三、图片混合模式

 此功能主要是可以让图片改变颜色，需要 colorBlendMode 属性和 color 属性联合使用，会产生意想不到的效果。

我们在上面的例子中，继续加入蓝色，colorBlendMode 选择 BlendMode.colorDodge。

代码如下：

  child: new Image.network(
            "http://a0.att.hudong.com/16/12/01300535031999137270128786964.jpg",
            color: Colors.blueAccent,
            colorBlendMode: BlendMode.colorDodge,
          ),

 效果图：

我们通过属性，改变了图片的颜色，是不是很神奇。当然我们还可以改变为其他的形式（例如： BlendMode.colorBurn 、  BlendMode.darken  、 BlendMode.difference  等），需要开发者去自己尝试，然后选择适合自己应用风格的属性。

 

四、repeat属性

repeat：图片重复展示。

可以让图片在特定容器内进行重复的展示。

• ImageRepeat.repeat : 横向和纵向同时进行重复，直到铺满整个容器。

• ImageRepeat.repeatX: 只进行横向重复，纵向不重复。

• ImageRepeat.repeatY：只进行纵向重复，横向不重复。

编写代码，让图片进行横向重复。代码如下：

  child: new Image.network(
            "http://a0.att.hudong.com/16/12/01300535031999137270128786964.jpg",
            repeat: ImageRepeat.repeatX,
          ),

效果图：

 

好了，本节课程到这里就结束了。我也是flutter学习者，喜欢请关注我吧，我们下节见 ~