Flutter Image图片组件的使用

加入图片的几种方式

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

fit

• BoxFit.fill: 全图显示，图片会被拉伸，并充满父容器。
• BoxFit.contain: 全图显示，显示原比例，可能会有空隙。
• BoxFit.cover: 显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
• BoxFit.fitWidth: 宽度充满（横向充满），显示可能拉伸，可能裁切。
• BoxFit.fitHeight: 高度充满（竖向充满）,显示可能拉伸，可能裁切。
• BoxFit.scaleDown: 效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

// Flutter 图片组件
import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello world',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter')
        ),
        body: Center(
          child: Container(
            child: new Image.network ( // .asset 加载资源图片 .network 网络资源图片 .file 加载本地图片 .memory 加载Uint8List资源图片
                'http://img.zcool.cn/community/[email protected]',
                fit: BoxFit.cover, // 控制图片的拉伸和挤压 
            ),
            width: 300.0, // 图片的宽
            height: 200.0, // 图片的高
            color: Colors.lightBlue, //图片的颜色
          ),
        ),
      ),
    );
  }
}

图片的混合模式

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

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello world',
      home:Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter')
        ),
        body: Center(
          child: new Image.network(
            'http://img.zcool.cn/community/[email protected]',
            color: Colors.greenAccent,
            colorBlendMode: BlendMode.modulate,
          )
        ),
      ),
    );
  }
}

repeat 图片重复

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

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello world',
      home:Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter')
        ),
        body: Center(
          child: Container(
            child: new Image.network(
              'http://img.zcool.cn/community/[email protected]',
              repeat: ImageRepeat.repeat,
            ),
            width:500.0,
            height:200.0,
          ),
        ),
      ),
    );
  }
}