Flutter - image组件

• image组件的使用
• fit组件 image填充方式
• 图片混合模式(滤镜效果)
• repeat重复属性

这一篇主要是对image组件的使用.经过一段时间的学习,发现Flutter中,基本上所有功能都是通过调用组件的形式进行完成功能的
因此,如果需要在一个地方加图片,那么就只需要new Image()即可.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '这里是beline的app',
      home: Scaffold(
        appBar: AppBar(title: Text('image组件')),
        body:Center(
          child: Container(
            child: Image.network('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3949195143,3166008216&fm=26&gp=0.jpg'),
            width:400.0,
            height:300.0,
            color:Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

由于在body中调用的是Center组件,所以child中的内容就会被居中,具体样式:

image.png

当然,我们的image组件还有很多属性,下面我们一一来看

image.png

• asset 表示在项目的资源目录引入,app目录中引入,在打包时会一起打包到app程序中
• file 表示存在手机中的地址,也可以理解为本地地址
• memory 加载Uint8List资源图片(目前没用过,详细需要参考文档使用)
• network 网络地址

现在图片放在容器当中,处于正中间的位置,发现图片并不能很好的适应容器,所以这个时候我们需要调用fit属性,类似于css中的background-size的作用
1.contain不对图片做任何处理,默认值.和上图一样.

fit:BoxFit.contain

image.png

2. fill按照容器的大小进行拉伸

fit:BoxFit.fill

image.png

3.fitWidth 表示横向100%,竖向多余部分裁切,不够部分空白

fit:BoxFit.fitWidth

image.png

4.fitHeight 和fitWidth类似,竖向100%显示,横向多余部分裁切,不够的部分空白

fit:BoxFit.fitHeight

image.png

5.cover 图片充满容器,按照容器最短的边完全填充图片,以保证图片占满整个容器

fit:BoxFit.cover

image.png

5.scaleDown 保持原图片大小

fit:BoxFit.scaleDown

image.png

图片混合模式 colorBlendMode 滤镜模式

我们可以通过colorBlendMode给图片混合一种颜色,这样就能从视觉上看上去给图片加了一层滤镜
想要混合颜色,需要两步

• 设置颜色
• 通过colorBlendMode设置混合模式

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '这里是beline的app',
      home: Scaffold(
        appBar: AppBar(title: Text('image组件')),
        body:Center(
          child: Container(
            child: Image.network(
              'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3949195143,3166008216&fm=26&gp=0.jpg',
              color:Colors.green,
              colorBlendMode: BlendMode.darken,
            ),
            width:400.0,
            height:300.0,
            color:Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

image.png

混合模式的模式有非常多种,同样是混合绿色,但是换一种混合方式,呈现形式也不同,比如

colorBlendMode: BlendMode.difference,

image.png

colorBlendMode: BlendMode.overlay,

image.png

具体需要使用哪一种混合模式,请根据API选择.

repeat 重复

这里的repeat使用也可以参考css中的repeat属性.这里需要注意的是,需要调用ImageRepeat组件来设置repeat类型

repeat: ImageRepeat.noRepeat,

• noRepeat 不重复,默认
• repeatX 相对于容器,横向重复
• repeatY 相对于容器,纵向重复
• repeat 重复铺满整个容器