第六节:Flutter 中Image 图片组件

Flutter中，我们可以通过Image组件来加载并显示图片，Image的数据源可以是asset、文件、内存以及网络。

1. Image 组件

Image widget有一个必选的image参数，它对应一个ImageProvider。

1.1 ImageProvider

介绍:

ImageProvider 是一个抽象类,定义获取图片数据的接口load()
不同的数据源获取图片需要实现不同的ImageProvider
AssetImage是实现了Asset中加载图片的ImageProvider
NetworkImage实现了从网络加载图片的ImageProvider

接下来通过示例了解Image组件的使用

2. 通过Image组件获取图片

2.1 加载本地图片

2.1.1 加载本地图片基本使用

从本地asset中加载图片说明:

在工程目录下创建images目录,将本地图片拷贝到这个目录中
在pubspec.yaml中的flutter部分添加如下内容
```
assets:
 - image/avatar.png
```

加载该图片

Image(
 image: AssetImage("images/avatar.png"),
    width: 100.0
)

示例:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                // 容器的子组件是图片组件
                child: Image(
                    // 图片组件image参数为本地图片
                    image: AssetImage("images/user.jpg"),
                    width: 100.0
                ),

                width: 200.0,               // 容器宽度
                height: 200.0,              // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
            )
        );
    }
}

显示结果:

本地图片_图.png

2.1.2 本地图片使用的快捷方式

Image也提供了一个快捷的构造函数Image.asset用于从asset中加载、显示图片：

修改上面的示例代码

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Image.asset(          // Image 本地资源加载的快捷方式
                    "images/user.jpg",       // 图片地址
                ),

                width: 200.0,                // 容器宽度
                height: 200.0,               // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
            )
        );
    }
}

显示的结果也是一样的.

2.2 加载网络图片

2.2.1 基本使用

使用NetworkImage组件加载网络图片

示例:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Image(
                    // 网络图片资源
                    image: NetworkImage(
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590211082973&di=b0aea5b44cd961615aea0d7e0ae6334c&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Fyzcs1023023%2Fpic%2Fitem%2Face54525742084dd935807a4.jpg"
                    )
                ),

                width: 200.0,               // 容器宽度
                height: 200.0,              // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
            )
        );
    }
}

显示结果:

网络图片_图2.png

2.2.2 网络图片加载的快捷方式

Image也提供了一个快捷的构造函数Image.network用于从网络加载、显示图片：

修改上面的实例代码

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                // 代码不同的位置,
                child: Image.network(
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590211082973&di=b0aea5b44cd961615aea0d7e0ae6334c&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Fyzcs1023023%2Fpic%2Fitem%2Face54525742084dd935807a4.jpg"
                ),

                width: 200.0,               // 容器宽度
                height: 200.0,              // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
            )
        );
    }
}

3. Image组件常用参数

3.1 常用参数

const Image({
    ...
    this.width, //图片的宽
    this.height, //图片高度
    this.color, //图片的混合色值
    this.colorBlendMode, //混合模式
    this.fit,//缩放模式
    this.alignment = Alignment.center, //对齐方式
    this.repeat = ImageRepeat.noRepeat, //重复方式
    ...
})

3.2 常用参数以及值的了解

名称	类型	说明
alignment	Alignment	图片的对齐方式, 使用Alignment构造函数掉调用方位:<br />1. Alignment.topLeft: 左上角对齐<br />2. Alignment.topcenter: 顶部居中对齐<br />3. Alignment.topright: 右上角对齐<br />4. Alignment.centerleft: 左侧居中对齐<br />5. Alignment.center: 正中对齐<br />6. Alignment.centerright: 右侧居中对齐<br />7. Alignment.bottomleft: 左下角对齐<br />8. Alignment.bottomcenter: 底部居中对齐<br />9. Alignment.bottomright: 右下角对齐
color和colorBlendMode		设置图片的背景颜色,通常和colorBlendMode配合在一起使用<br />这样可以是图片颜色和背景颜色混合
fit	BoxFix	fit属性: 用来控制图片的拉伸和挤压,这都是根据父容器来的<br />1.BoxFit.fill: 全图显示,图片会被拉伸,并充满父容器<br />2.BoxFit.contain:全图显示.显示原比例,可能会有空隙<br />3.BoxFit.cover: 显示可能拉伸,可能裁剪,充满(图片充满整个容器,但不变形)<br />4.BoxFit.fitWidth: 宽度充满,显示可能拉升可能裁剪<br />5.BoxFit.fitHeight: 高度充满,显示可能拉伸,可能裁切<br />6.BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过原图片大小,可小不可大
repeat	平铺	ImageRepeat.repeat: 横向和纵向都进行重复,直到铺满整个画布<br />ImageRepeat.repeatX:横向重复,纵向不重复<br />ImageRepeat.repeatY:纵向重复,横向不重复
width		宽度: 一般结合ClipOval才能看到效果
height		高度: 一般结合ClipOval才能看到效果

3.3 参数说明

width、height：用于设置图片的宽、高.一般结合ClipOval组件使用才能看到效果
- 不指定宽高时,图片根据当前父容器的限制,尽可能显示其原始图片
- 如果width,height只设置其中一个值, 另一个属性按比例缩放
fit :该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式,某事在BoxFit中定义
- fill:会拉伸填充满显示空间,图片会变形。
- cover: 按图片原有比例缩放,铺满整个空间,超出的背剪切
- contain: 图片默认适应的规则,安装图片原有比例缩放值空间适当显示
- fitWidth: 图片宽度缩放到显示空间的宽度, 图片会按原有比例缩放, 不变形,超出的被裁剪
- fitHeight: 图片高度缩放到显示空间的宽度, 图片会按原有比例缩放, 不变形,超出的被裁剪
- none: 图片没有适应策略, 会在显示空间内显示图片,如果图片过大,只会显示图片中间的部分

3.4 示例:

3.4.1 测试fit参数

代码写法:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Image.network(
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590211082973&di=b0aea5b44cd961615aea0d7e0ae6334c&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Fyzcs1023023%2Fpic%2Fitem%2Face54525742084dd935807a4.jpg"
                    ,
                    fit: BoxFit.cover,  // 修改自出,查看不同的值对应的变化
                ),

                width: 200.0,               // 容器宽度
                height: 200.0,              // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
            )
        );
    }
}

显示结果:

BoxFit.cover_图3.png

3.4.2 测试 alignment参数

代码:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Image.network(
                    "http://cli.oss.aliyuncs.com/2015/04/22/21f5deae6515c6c8a8834c5a65506971.jpg",

                    // 定义图片在父容器的九宫方位
                    alignment: Alignment.topRight
                ),

                width: 400.0,               // 容器宽度
                height: 400.0,              // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
            )
        );
    }
}

显示结果

alignment_图4.png

示例是右上角对齐, 其他对齐方式请自己一一测试.自己测试才会记得更熟哦

3.4.3 背景颜色和图片颜色混合模式

代码:


class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Image.network(
                  "http://cli.oss.aliyuncs.com/2015/04/22/21f5deae6515c6c8a8834c5a65506971.jpg",
                    color: Colors.blue,                  // 图片的背景颜色
                    colorBlendMode:BlendMode.colorDodge  // 图片背景颜色和图片颜色混合
                ),

                width: 400.0,               // 容器宽度
                height: 400.0,              // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
            )
        );
    }
}

显示结果

colorblendmode_图5.png

注意: BlendMode组件有很多混合模式, 自己可以一一测试.

3.4.4 图片重复:

代码:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                child: Image.network(
                    "http://cli.oss.aliyuncs.com/2015/04/22/21f5deae6515c6c8a8834c5a65506971.jpg",

                    repeat: ImageRepeat.repeat        // 背景平铺
                    // repeat: ImageRepeat.repeatY    // Y轴平铺
                    // repeat: ImageRepeat.repeatY    // X轴平铺
                    // repeat: ImageRepeat.noRepeat   // 不平铺
                ),

                width: 400.0,               // 容器宽度
                height: 400.0,              // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
                ),
            )
        );
    }
}

显示结果:

repeat_图6.png

4. 图片的其他定义方式

图片除了在容器的child参数中配置,还可以在decoration 描述参数中配置

如果在decoration 描述参数中配置,需要使用DecorationImage组件来处理图片的引入

同时还要注意,在decoration中 Image.network快捷引入图片的方式不能使用, 还是要用NetworkImage组件

示例:

代码:

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(

                width: 200.0,               // 容器宽度
                height: 200.0,              // 容器的高度
                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色
               
                    // 在容器的描述中加载图片
                    image: DecorationImage(
                        image: NetworkImage(
                            "http://cli.oss.aliyuncs.com/2015/04/22/21f5deae6515c6c8a8834c5a65506971.jpg",
                        ),
                    )
                ),
            )
        );
    }
}

图片正常加载

5. 圆形图片

5.1 容器描述中配置圆形图片

圆形图片说明:

在容器中使用child参数配置的图片在decoration中配置圆角,但是图片不会有圆角
配置圆角图片,图片需要在decoration中配置

代码

Widget build(BuildContext content){
    return Center(
        child: Container(

            width: 200.0,               // 容器宽度
            height: 200.0,              // 容器的高度
            decoration: BoxDecoration(
                color: Colors.green,     // decoration中也有color,背景颜色
                // 配置圆角
                borderRadius: BorderRadius.all(
                    Radius.circular(100.0)
                ),

                // 描述中配置图片
                image: DecorationImage(
                    image: NetworkImage(
                        "http://cli.oss.aliyuncs.com/2015/04/22/21f5deae6515c6c8a8834c5a65506971.jpg",
                    ),
                )
            ),
        )
    );
}
}

显示结果:

圆角图片_图7.png

5.2 在ClipOval中配置圆角图片

ClipOval 会根据图片大小切成圆角, 图片是正方形会切成圆形, 图片如果是长方形,会切成椭圆形

5.2.1 更加图片大小切成椭圆

代码

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // ClipOval 自动根据图片的大小切成圆角
                child: ClipOval(
                    child: Image.network(
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590211082973&di=b0aea5b44cd961615aea0d7e0ae6334c&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Fyzcs1023023%2Fpic%2Fitem%2Face54525742084dd935807a4.jpg"
                    )
                ),

                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色

                ),
            )
        );
    }
}

显示结果

ClipOval椭圆_图8.png

5.2.2 通过改变图片width 和height 变成圆形

在ClipOval中就可以使用width和height参数了, 通过这两个参数变成正圆

代码

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // ClipOval 自动根据图片的大小切成圆角
                child: ClipOval(
                    child: Image.network(
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590211082973&di=b0aea5b44cd961615aea0d7e0ae6334c&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Fyzcs1023023%2Fpic%2Fitem%2Face54525742084dd935807a4.jpg",
                        width:200.0,
                        height:200.0,
                        fit: BoxFit.cover
                    )
                ),

                decoration: BoxDecoration(
                    color: Colors.green,     // decoration中也有color,背景颜色

                ),
            )
        );
    }
}

显示结果:

圆形图片_图9.png