Flutter学习第二课-基础组件 Image

在 Flutter 中有多种方式，用来加载不同形式的图片：

• Image：通过ImageProvider来加载图片
• Image.asset：用来加载本地资源图片
• Image.file：用来加载本地（File文件）图片
• Image.network：用来加载网络图片
• Image.memory：用来加载Uint8List资源（byte数组）图片

1. Image

Image 的一个参数是 ImageProvider，所有形式的图片加载都是依赖它，这个类里面就是实现图片加载的原理。用法如下：

new Image(image: new AssetImage('images/icon.png'));

new Image(image: new NetworkImage('https://profile.csdnimg.cn/E/8/A/1_chen1234219'))

2. Image.asset

需要在 pubspec.yaml 文件中声明一下：

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/icon.png
    - images/2.0x/icon.png
    - images/3.0x/icon.png

用法如下：

new Image.asset('images/icon.png')

3. Image.file

加载一个本地 File 图片，比如相册中的图片，用法如下：

new Image.file(new File('/storage/xxx/xxx/test.jpg'))

4. Image.network

加载一个网络图片，用法如下：

new Image.network('https://profile.csdnimg.cn/E/8/A/1_chen1234219')

5. Image.memory

加载字节流数据图片，用法如下：

new Image.memory(bytes)

以上讲述的基本加载图片模式，更多相关API请看以下代码：

/*
const Image({
    Key key,
    @required this.image,
        Image：通过ImageProvider来加载图片
        Image.asset：用来加载本地资源图片
        Image.file：用来加载本地（File文件）图片
        Image.network：用来加载网络图片
        Image.memory：用来加载Uint8List资源（byte数组）图片
    this.frameBuilder,//图片帧处理 ，比如图片边距设置，加载动画之类的。
    this.loadingBuilder,//图片加载的时候一些处理
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,//控件宽度
    this.height,//控件高度
    this.color,//图片背景色
    this.colorBlendMode,//与color属性需要配合使用，就是颜色和图片混合
    this.fit,//设置图片填充方式
        fit:BoxFit.contain,//尽量撑满容器，并保持原图比例，容器可能会留白
        fit:BoxFit.fill,//撑满容器,图片拉伸
        fit:BoxFit.fitWidth,//图片横向撑满容器，图片被裁剪
        fit:BoxFit.fitHeight,//图片纵向撑满容器，图片被裁剪
        fit:BoxFit.cover,//图片等比拉伸撑满容器，图片可能被裁剪
        fit:BoxFit.scaleDown,//无论容器大小，保持图片大小不变剧中显示
        fit: BoxFit.fill, //撑满容器,图片拉伸
    this.alignment = Alignment.center,//控制图片摆放的位置
    this.repeat = ImageRepeat.noRepeat,//重复
        repeat: ImageRepeat.repeat, //重复充满容器
        repeat: ImageRepeat.repeatX,//横向重复
        repeat: ImageRepeat.repeatY,//纵向重复
    this.centerSlice,//将图片已.9的方式进行切割拉伸
    this.matchTextDirection = false,
    this.gaplessPlayback = false,//当加载新图片时，如果为true保留旧图片的显示，如果为false删除旧图片留空，直到新图标加载完成显示
    this.filterQuality = FilterQuality.low,图像过滤器的质量级别。(渲染模式的质量)，默认 FilterQuality.low
  })
*/
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var img = AssetImage("images/icon.png");
    return MaterialApp(
        title: "Flutter Demo",
        color: Colors.white,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Image Sample'),
          ),
          body: Container(
            child: SingleChildScrollView(
              child: Column(
                  children: <Image>[
                Image.network(
                  "https://profile.csdnimg.cn/E/8/A/1_chen1234219",
                  frameBuilder: (BuildContext context, Widget child, int frame,
                      bool wasSynchronouslyLoaded) {
                    if (wasSynchronouslyLoaded) {
                      return child;
                    }
                    return AnimatedOpacity(
                      child: child,
                      opacity: frame == null ? 0 : 1,
                      duration: const Duration(seconds: 1),
                      curve: Curves.easeOut,
                    );
                  },
                  loadingBuilder: (BuildContext context, Widget child,
                      ImageChunkEvent loadingProgress) {
                    if (loadingProgress == null) return child;
                    return Center(
                      child: CircularProgressIndicator(
                        value: loadingProgress.expectedTotalBytes != null
                            ? loadingProgress.cumulativeBytesLoaded /
                            loadingProgress.expectedTotalBytes
                            : null,
                      ),
                    );
                  },
                ),
                Image(
                  image: img,
                  fit: BoxFit.fill,
                ),
                Image(
                  image: img,
                  fit: BoxFit.contain,
                ),
                Image(
                  image: img,
                  fit: BoxFit.cover,
                ),
                Image(
                  image: img,
                  fit: BoxFit.fitWidth,
                ),
                Image(
                  image: img,
                  fit: BoxFit.fitHeight,
                ),
                Image(
                  image: img,
                  fit: BoxFit.scaleDown,
                ),
                Image(
                  image: img,
                  fit: BoxFit.none,
                ),
                Image(
                  image: img,
                  repeat: ImageRepeat.repeatY,
                )
              ].map((e) {
                return Row(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
                      child: Container(
                        width: 100.0,
                        height: 200.0,
                        child: e,
                      ),
                    ),
                    Text(
                      e.fit.toString(),
                      style: TextStyle(fontSize: 16.0),
                    )
                  ],
                );
              }).toList()),
            ),
          ),
        ));
  }
}