在项目中，图片资源肯定是必不可少的，在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
