Flutter Widget--Image 学习

---flutter：万物皆控件

加入图片的几种方式

• 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差不多，但是此属性不允许显示超过源图片大小，可小不可大。

repeat图片重复

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: "Image Widget",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Image Widget"),
        ),
        body: Center(
          child: Container(
            child: new Image.network(
              'https://tse1-mm.cn.bing.net/th?id=OIP.iILt8he9hsdQQ56H9ysT6wHaFj&w=131&h=100&c=8&rs=1&qlt=90&pid=3.1&rm=2',
              scale: 1,  // 缩小倍数
              fit: BoxFit.scaleDown, // 填充方式
              repeat: ImageRepeat.noRepeat, // 重复方式
              color: Colors.red, // 颜色
              colorBlendMode: BlendMode.colorBurn, // 颜色与图片融合方式
            ),
            width: 300.0,
            height: 300.0,
            color: Colors.lightGreen,
          ),
        )
      ),
    );
  }
}

图片.png