Flutter学习--Image组件

一、介绍

展示图片资源

1.必须在根目录下创建images子目录，images目录中，创建2.0x和3.0x文件夹
2.打开pubspec.yaml文件，配置assets（配置数据时，-后面必须加个空格），如图

946c7bdcc34a53e5030bb6b4f875ec3.png

f3397f08a3545bf89d5b730e6530169.png

二 常用参数详解

属性	说明
image	Image.asset:加载资源图片 Image.file:加载本地图片 Image.network:加载网络图片 Image.memory:加载Uint8List资源图片
semanticLabel	String类型，图像的语义描述
excludeFromSemantics	bool类型，是否开启语义描述，默认为false
color	背景色
colorBlendMode	混合模式（即color和图片进行混合），有很多种模式
alignment	对齐方式
width	宽，一般和ClipOval一起使用，制作圆形或圆角图片
height	宽，一般和ClipOval一起使用，制作圆形或圆角图片
fit	图片的展示形式 BoxFit.fill:全图显示，图片会被拉伸，并充满父容 BoxFit.contain:全图显示，显示原比例，可能会有空隙。 BoxFit.cover：显示可能拉伸，可能裁切，充满（充满容器不变形）。 BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。 BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。 BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大
repeat	平铺 ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。 ImageRepeat.repeatX: 横向重复，纵向不重复。 ImageRepeat.repeatY：纵向重复，横向不重复。

demo

child: Container(
        child: Image.network(
          "http://pic.baike.soso.com/p/20130828/20130828161137-134644596.jpg",
          //对齐方式
          alignment: Alignment.center,
          //背景色
          color: Colors.red,
          //混合模式
          colorBlendMode: BlendMode.overlay,
          //平铺
          repeat: ImageRepeat.repeat,
        ),
        width: 500.0,
        height: 500.0
      ),

child: Container(
        //圆形或圆角图片
        child: ClipOval(
          child: Image.asset(
            "images/bg.png",
            height: 300,
            width: 300,
            fit: BoxFit.scaleDown,
          ),
        ),
      ),