Flutter 浅析之Image

技术无止境，只怕不学习啊，Flutter 我们开始吧

Flutter Image图片

添加 Image空间 首相Image有四种加载图片的方式
network 加载网络图片
file 本地文件
asset 资源目录
主要讲解asset 资源目录

添加图片文件夹

在lib 同一个目录下添加images文件夹

把需要使用的图片复制到images文件夹中然后在pubspec.yaml中配置

注意格式

在容器中添加Image读取资源图片

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Image.asset(   // network 加载网络图片，file 本地文件,asset资源目录
              "images/timg.jpeg",
            )，
            width: 200, // Container 的宽
            height: 200, // Container 的高
          ),
        ),
      ),
    );
  }
}

fit图片填充 基本属性已经列出可以自行演示

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,
            child: Image.asset(   // network 加载网络图片，file 本地文件,asset资源目录
              "images/timg.jpeg",
                fit: BoxFit.fill, // contain 保持原图比例，fill填充图片图片不保帧，
                                      // fitWidth横向填充图片不会被裁减，fitHeight纵向填充图片不会被裁减
                                      //cover 图片可能被裁切，但是保帧，scaleDown原图片大
            ),
            width: 200, // Container 的宽
            height: 200, // Container 的高
          ),
        ),
      ),
    );
  }
}

图片混合模式设置colorBlendMode 需要设置color

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,
            child: Image.asset(   // network 加载网络图片，file 本地文件,asset资源目录
              "images/timg.jpeg",
                fit: BoxFit.fill, // contain 保持原图比例，fill填充图片图片不保帧，
                                      // fitWidth横向填充图片不会被裁减，fitHeight纵向填充图片不会被裁减
                                      //cover 图片可能被裁切，但是保帧，scaleDown原图片大小
              color: Colors.greenAccent,  // 图片混合 设置颜色
              colorBlendMode: BlendMode.darken, // 图片混合模式
            ),
            width: 200, // Container 的宽
            height: 200, // Container 的高
          ),
        ),
      ),
    );
  }
}

图片重复repeat

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,
            child: Image.asset(   // network 加载网络图片，file 本地文件,asset资源目录
              "images/timg.jpeg",
                fit: BoxFit.contain, // contain 保持原图比例，fill填充图片图片不保帧，
                                      // fitWidth横向填充图片不会被裁减，fitHeight纵向填充图片不会被裁减
                                      //cover 图片可能被裁切，但是保帧，scaleDown原图片大小
              color: Colors.greenAccent,  // 图片混合 设置颜色
              colorBlendMode: BlendMode.darken, // 图片混合模式

              repeat: ImageRepeat.repeatY, // 图片不重复noRepeat ，repeat重复把容器填满，repeatX横向重复，repeatY纵向重复

            ),

            width: 200, // Container 的宽
            height: 200, // Container 的高
          ),
        ),
      ),
    );
  }
}

Image 就介绍到这里，其他的可以根据自己的使用查询API