Flutter 系列文章：Flutter Image 控件介绍

Image —— 图像控件

1、使用方式

• 1.支持的图片格式：

  支持如下图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBMP

• 2.图片文件夹

  

• 在项目的根目录下建立图片文件夹

• 主资源默认对应于1.0倍的分辨率图片。看一个例子：

…/my_icon.png //主资源
    …/2.0x/my_icon.png
    …/3.0x/my_icon.png
复制代码

• 在设备像素比率为1.8的设备上，.../2.0x/my_icon.png 将被选择。对于2.7的设备像素比率，.../3.0x/my_icon.png将被选择。
• 若是未在Image控件上指定渲染图像的宽度和高度，它将占用与主资源相同的屏幕空间量（并非相同的物理像素），只是分辨率更高。 也就是说，若是.../my_icon.png是72px乘72px，那么.../3.0x/my_icon.png应该是216px乘216px; 但若是未指定宽度和高度，它们都将渲染为72像素×72像素（以逻辑像素为单位）。
• pubspec.yaml中asset部分中的每一项都应与实际文件相对应，但主资源项除外。当主资源缺乏某个资源时，会按分辨率从低到的顺序去选择 （也就是说1x中没有的话会在2x中找，2x中尚未的话就在3x中找）。

# To add assets to your application, add an assets section, like this:
  assets:
    - images/2.0x/live_end_yyicon.png
    - images/3.0x/live_end_yyicon.png
    - images/2.0x/treasure_default_card.png
    - images/3.0x/treasure_default_card.png
复制代码

• 配置好pubspec.yaml 以后须要运行Pacakages get

2、使用方法

var netImageUrl1 = "http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg";
  var netImageUrl2 = "https://flutter.io/images/homepage/header-illustration.png";
  var localImageUrl = "images/2.0x/treasure_default_card.png";
  var fileTest = "/storage/emulated/0/cache/111.png";
复制代码

1. 加载本地Image目录下的图片 --> Image.asset

Image.asset(localImageUrl)
复制代码

2. 加载网络图片 --> Image.network

Image.network(netImageUrl2)
复制代码

3. 经过使用ImageProvider加载图片

Image(image: NetworkImage(netImageUrl1),),
    Image(
       image: AssetImage(localImageUrl),
    )
复制代码

4. 加载外部文件里面图片

Image.file(File(fileTest))
复制代码

3、经常使用属性

1. alignment 设置图片在宽高范围内的对齐方式

alignment: Alignment.bottomLeft
复制代码

2. centerSlice 设置边缘裁剪形式

centerSlice: Rect.fromLTWH(20, 20, 100, 100),  
    centerSlice: Rect.fromLTRB(100, 100, 100, 100),
复制代码

3. color 与 colorBlendMode 结合使用，用于颜色与每一个图像像素混合

color: Colors.black12,
    colorBlendMode: BlendMode.colorBurn,
复制代码

4. repeat 绘制图片未覆盖的布局边界的任何部分 repeat

repeat:ImageRepeat.repeatX,
    repeat:ImageRepeat.repeatY,
    repeat:ImageRepeat.repeatX,
复制代码

5. 设置图片宽高

//设置宽高
   width: 300,
   height: 300,
复制代码

6. 设置图片怎么分布到对应的宽高中

fit 模式	描述
BoxFit.fill	全图显示，显示可能拉伸，充满
BoxFit.contain	全图显示，显示原比例，不需充满
BoxFit.cover	显示可能拉伸，可能裁剪，充满
BoxFit.fitWidth	显示可能拉伸，可能裁剪，宽度充满
BoxFit.fitHeight	显示可能拉伸，可能裁剪，高度充满
BoxFit.scaleDown	效果和contain差很少,可是此属性不容许显示超过源图片大小，可小不可大

有图片的连接

• docs.flutter.io/flutter/pai…

4、一个完整代码的示例

import 'package:flutter/material.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Demo',
      theme: ThemeData(
        primarySwatch: Colors.green
      ),
      home: MyHomePage(title: 'Image Demo'),
    );

  }
}


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
  }

class _MyHomePageState extends State<MyHomePage>{
  var netImageUrl1 = "http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg";
  var netImageUrl2 = "https://flutter.io/images/homepage/header-illustration.png";
  var localImageUrl = "images/2.0x/treasure_default_card.png";
  var fileTest = "/storage/emulated/0/cache/111.png";


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
            children: <Widget>[
              //重新建的image文件中获取
              Image.asset(localImageUrl),
              //加载网络图片
              Image.network(netImageUrl2),
              // 本地文件图片
//              Image.file(File(fileTest)),
              //使用ImageProvider加载图片
              Image(image: NetworkImage(netImageUrl1),),
              Image(
                width: 100,
                height: 100,
                image: AssetImage(localImageUrl),
              ),
              Image(
                //设置imageProvider
                image: AssetImage(localImageUrl),
                //设置图像在宽高范围内的对齐方式
                alignment: Alignment.bottomLeft,
                //设置边缘裁剪形式
//                centerSlice: Rect.fromLTWH(20, 20, 100, 100),
//                centerSlice: Rect.fromLTRB(100, 100, 100, 100),
               //color 与 colorBlendMode 结合使用，用于颜色与每一个图像像素混合
                color: Colors.greenAccent,
                colorBlendMode: BlendMode.exclusion,
               // ? 图像过滤器的质量级别
               filterQuality: FilterQuality.high,
                //绘制图像未覆盖的布局边界的任何部分
//                repeat:ImageRepeat.repeat,
//                repeat:ImageRepeat.repeatY,
//                repeat:ImageRepeat.repeatX,
               //设置宽高
               width: 300,
               height: 300,
               fit: BoxFit.fill,
              )

            ],

        ),
      ),
    );
  }
}



复制代码