Flutter——Image Widget篇

在项目中，图片资源肯定是必不可少的，在Fluuter中，显示图片我们就要用到Image这个组件。

Image的几种加载方式

• Image.asset:加载资源图片，就是加载项目资源目录中的图片。
• Image.network:加载网络图片。
• Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径。
• Image.memory: 加载Uint8List资源图片。

比如这里，我们从网络上加载一张图片

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

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

class ImageApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.green,//加背景色是为了更好的观察图片
        appBar: AppBar(
          title: Text("Image widget"),
        ),
        body: Image.network("https://upload-images.jianshu.io/upload_images/5089080-40fec4128271e592.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"),
      ),
    );
  }
}

fit----根据父元素控制图片的拉伸和挤压

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

repeat----图片重复

• ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
• ImageRepeat.repeatX: 横向重复，纵向不重复。
• ImageRepeat.repeatY：纵向重复，横向不重复。

  child: Image.network(
            "https://upload-images.jianshu.io/upload_images/5089080-40fec4128271e592.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp",
            repeat: ImageRepeat.repeat,
          )

image.png