Fluttter基础组件Image的使用

1.图片 Image

图片组件( Image)是显示图像的组件， Image 组件有多种构造函数 :
new Image：从 ImageProvider 获取图像 。
new Image.asset：加载资源图片。
new Image.file：加载本地图片文件。
new Image.network：加 载网络图片 。
new Image.memory：加载 Uint8List 资源图片 。

2.image.network是远程网络图片

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Image.network(
        'https://p.6463.com/360kuai/20210622/1624351047tit.png',
        alignment: Alignment.topLeft,//左上角居中
        fit:BoxFit.cover,//可能裁剪，充满整个容器。不会变形
      ),
      width: 200.0,//容器宽
      height: 100.0,//容器高
    );
  }
}

3设置圆形容器Container的两种方式

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: 200.0,//容器宽
      height: 200.0,//容器高
      decoration: BoxDecoration(
        //设置圆形的第一种方式
        //  borderRadius: BorderRadius.all(Radius.circular(100.0)),
        // 设置圆形的第二种方式
        borderRadius:BorderRadius.circular(100.0),
        //颜色
        color: Color.fromARGB(255, 192, 213, 1),
      )
    );
  }
}

4设置圆形图片第1种方式

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: 200.0,//容器宽
      height: 200.0,//容器高
      decoration: BoxDecoration(
         //设置圆形的第一种方式
        //  borderRadius: BorderRadius.all(Radius.circular(100.0)),
        // 设置圆形的第二种方式
        borderRadius:BorderRadius.circular(100.0),
        // 设置圆形图片
        image: DecorationImage(
          image: NetworkImage("https://p.6463.com/360kuai/20210622/1624351047tit.png"),
          fit: BoxFit.cover
        )
      )
    );
  }
}

5.设置圆形图片的第2种方式

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
         child: new ClipOval(
           child: Image.network(
            'https://p.6463.com/360kuai/20210622/1624351047tit.png',
             //保证在小图片的时候不变形
             height: 100.0,
             width: 100.0,
             fit: BoxFit.cover,
           ),
         ), 

    );
  }
}

6.引入本地土图片的方式

步骤1：
在项目的根目录下创建文件夹images也要放入
然后在images文件夹下创建 个2.0x文件夹，3.0x文件夹，4.0x文件夹
在每一个2.0下，3.0x,4.0x文件下放入对应的图片
同时在images也要放入2.0下，3.0x,4.0x下的图片

步骤2：
Flutter使用pubspec.yaml文件（位于项目根目录），
来识别应用程序所需的asset。
写上图片对应的路径

  assets:
    - images/bgg.png
    - images/2.0x/bgg.png
    - images/3.0x/bgg.png
    - images/4.0x/bgg.png

注意: 由于 yaml 文件对缩进严格，
所以必须严格按照每一层两个空格的方式进行缩进，
此处assets前面应有两个空格。

还需要注意的是：引入本地图片后，
要重新启动一下flutter项目，flutter  run

Flutter框架对加载过的图片是有缓存的（内存），
默认最大缓存数量是1000，最大缓存空间为100M

class MyCont extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
         child: new ClipOval(
           child:Image.asset(
            'images/bgg.png',
             //保证在小图片的时候不变形
             height: 100.0,
             width: 100.0,
             fit: BoxFit.cover,
           ),
         ),
    );
  }
}