Flutter学习第2章 Image Widget 图片组件的使用

1、基本结构

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "组件学习",
      home: Scaffold(
        body: Center(
            child: new Container(
              child: new Image.network(
                  'http://pic27.nipic.com/20130321/9678987_225306451169_2.jpg',
                  //fit:BoxFit.scaleDown //图片充满

                  //color:Colors.greenAccent ,
                  //colorBlendMode: BlendMode.modulate,//对图片进行处理

                  repeat: ImageRepeat.repeat,//重复填满容器

            ),
            width: 300.0,
              height: 300.0,
              color: Colors.lightGreen,
            ),
        
        ),
           ),
    );
  }
}

2、效果展示

3、属性解释

• Image.asset:加载本地资源图片，就是加载项目资源目录中的图片，里面的图片会被打包，使用相对路径。

• Image.network:网络资源图片。

• Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，测试可用。

• Image.memory: 加载Uint8List资源图片。

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

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

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

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

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

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

  color:Colors.greenAccent ,
  colorBlendMode: BlendMode.modulate,//对图片进行处理

• color：是要混合的颜色，如果你只设置color是没有意义的。

• colorBlendMode:是混合模式，相当于我们如何混合。