一丶 效果图
【1】引用远程图片
【2】引用本地图片
【3】实现圆形图片（方法一）、圆角图片（受弧度影响）
【4】实现圆形图片（方法二）
二丶 代码+注释
【1】引用远程图片
import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('FlutterDemo'),
),
body: HomeCentent(),
),
);
}
}
class HomeCentent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: Image.network( //引入一张远程图片
"https://www.itying.com/images/flutter/2.png", //远程图片链接
alignment: Alignment.topLeft, //设置图片的方位在左上角
// color: Colors.yellow, //设置这张图片的颜色
// colorBlendMode: BlendMode.luminosity, //设置颜色的混合模式
fit:BoxFit.cover, //设置图片的显示模式，cover—全屏显示，最常用！
// repeat: ImageRepeat.repeatX, //横向平铺，纵向不变
// repeat: ImageRepeat.repeat, //横向纵向都平铺,
),
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.yellow //设置方框背景颜色
),
)
);
}
}
【2】引用本地图片
先做准备工作：（三步）
1.项目根目录下，创建Images文件夹，如下图：
2.分别创建2.0x，3.0x，4.0x并且在这些文件夹里面放图片，然后再在外面放一张图片，如图：
3.在pubspec.yaml 文件里，增加如下配置：
点击右上角 Packages get并且要Ctrl+s保存
然后就可以开始敲代码了：
import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('FlutterDemo'),
),
body: HomeCentent(),
),
);
}
}
class HomeCentent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: Image.asset('images/aa.png', //导入本地图片
fit: BoxFit.cover,
),
height: 300,
width: 300,
)
);
}
}
【3】实现圆形图片（方法一）、圆角图片（根据弧度变化）
return Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.yellow , //设置方框背景颜色
// borderRadius: BorderRadius.all(
// Radius.circular(150) //变成圆形，不过一般不这么实现圆形图片
// ),
borderRadius: BorderRadius.circular(150), //实现圆形图片的方式一： 有些麻烦
image: DecorationImage(
image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
fit: BoxFit.cover //铺满全屏
),
),
)
);
【4】实现圆形图片（方法二）：
return Center(
child: Container(
child: ClipOval( //实现圆形图片方式二，最简单的方式
child: Image.network('https://www.itying.com/images/flutter/2.png',
height: 100,
width: 100,
fit: BoxFit.cover,
),
),
)
);
三丶 知识点
图片组件是显示图像的组件，Image 组件有很多构造函数，这里我们只给大家讲两个
Image.asset， 本地图片
Image.network 远程图片
Image 组件的常用属性:
名称 类型 说明
alignment Alignment 图片的对齐方式
color 和 colorBlendMode 设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合
fit BoxFit fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。
BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain:全图显示，显示原比例，可能会有空隙。
BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeat 平铺
ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX: 横向重复，纵向不重复。
ImageRepeat.repeatY：纵向重复，横向不重复。
width 宽度 一般结合 ClipOval 才能看到效果
height 高度 一般结合 ClipOval 才能看到效果
更多属性参考：https://api.flutter.dev/flutter/widgets/Image-class.html
