Flutter-Image（UIImageView）

Flutter

Image就是相对于iOS开发中的UIImageView，把与UIImageView设置差别很大的点拎出来说明一下。

void main() => runApp(WudanImageViewPage());
class WudanImageViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Class Name',
      home: Scaffold(
        appBar: AppBar(title: Text('UIImageView')),
        body: Center(
          child: Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554110093883&di=9db9b92f1e6ee0396b574a093cc987d6&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20%2F151%2Fw2048h1303%2F20180429%2F37c0-fzvpatr1915813.jpg",
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

加载方式

• Image.asset：加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
• Image.network：网络资源图片
• Image.file：加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
• Image.memory：加载Uint8List资源图片

fit属性的设置

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
• BoxFit.contain:全图显示，显示原比例，可能会有空隙。
  BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
• BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
• BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
• BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

图片的混合模式

图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果也是非常丰富的。

child: Image.network(
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554110093883&di=9db9b92f1e6ee0396b574a093cc987d6&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20%2F151%2Fw2048h1303%2F20180429%2F37c0-fzvpatr1915813.jpg',
    color: Colors.greenAccent,
    colorBlendMode: BlendMode.darken,
),

示例图

示例图2