flutter—Image图片的使用

加入图片的方式：

• Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
• Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
• Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
• Image.memory: 加载Uint8List资源图片。

网络资源图片：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'http://bug.mvbox.com/data/upload/1/202009/0816094109428nuc.png', 
              // fit: BoxFit.fitHeight,
              // color: Colors.redAccent,
              // colorBlendMode: BlendMode.lighten,
              repeat: ImageRepeat.repeatX,
              // scale: 1.0
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.greenAccent,
          ),
        )
      ),
    );
  }
}

　　

静态资源图片：

如果想配置项目资源文件，需要使用pubspec.yaml文件，把资源文件在这里声明。比如在项目根目录下新建了一个images文件夹，文件夹下面放了一个图片1.jpg，那在pubspec.yaml文件里就要进行声明。代码如下：

  assets:
    - images/1.jpg

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('images/1.jpg'),
    );
  }
}

 

 

fit属性

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的。

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

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

• BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

• BoxFiit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

• BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

• BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

图片混合模式

图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果也是非常丰富的。在这里作几个简单的例子，让大家看一下效果，剩下的留给小伙伴自己探索。

• color：是要混合的颜色，如果你只设置color是没有意义的。
• colorBlendMode:是混合模式，相当于我们如何混合。

repeat图片重复 

• ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。

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

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