Flutter——Image组件（图片组件）

Image组件有很多构造函数，这里只说两个。

• Image.asset  本地图片

1.在根目录新建文件夹 /images

2.在 images 文件夹下建立两个文件夹 /images/2.0x  /images/3.0x

3.在 /image 下放最小的图片，依次放较大的图片在 2.0x，3.0x

4.在pubspec.yaml声明添加的图片文件

flutter:
  assets:
    - images/123.ipeg
    - images/2.0x/123.jpeg
    - images/3.0x/123.jpeg

5.在代码中就可以使用了

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "imageWidget",
      home: Scaffold(
        body: Container(
          child: Image.asset("images/123.jpeg")
        ),
      ),
    );
  }
}

 

• Image.network  远程图片

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "imageWidget",
      home: Scaffold(
        body: Container(
          child: Image.network("https://pics4.baidu.com/feed/1ad5ad6eddc451dabefc4f0ffc208b63d116322a.jpeg?token=a3becc48305b35b82b59db0e88d5cdc5&s=15F057864E5469D2CA11C17E03001013")
        ),
      ),
    );
  }
}

 

• Image组件的常用属性

名称	类型	说明
alignment	Alignment	图片的对齐方式
color 和 colorBlendMode		设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合
fit	BoxFit	fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来 的。 BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 BoxFit.contain:全图显示，显示原比例，可能会有空隙。 BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。 BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。 BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。 BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeat		ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。 ImageRepeat.repeatX: 横向重复，纵向不重复。 ImageRepeat.repeatY：纵向重复，横向不重复。
width		宽度  一般结合 ClipOval 才能看到效果（ClipOval 直接自适应成圆形或椭圆型图片）
height		高度  一般结合 ClipOval 才能看到效果（ClipOval 直接自适应成圆形或椭圆型图片）