| 属性or参数 | 类型 / 是否可选 | 作用 |
|---|---|---|
| image | ImageProvider的子类/@required | 决定使用的图片来源 |
| width | double / 命名可选 | 宽度 |
| height | double / 命名可选 | 高度 |
| fit | Boxfit / 命名可选 | 填充方式 |
| alignment | Alignment / 命名可选 | 对齐方式,图片不铺满时才显示作用,还可以通过创Alignment(x,y),的方式设置 |
| color | Color / 命名可选 | 混入的颜色 |
| colorBlendMode | BlendMode / 命名可选 | 设定颜色的混入模式 ,类似于OpenGL的颜色混合模式 |
| repeat | ImageRepeat / 命名可选 | 当图片不铺满时,空余的地方重复显示图片 |
ImageProvider 的常用子类
| 子类名称 | 意义 |
|---|---|
| AssetImage | 从本地资源文件中读取图片 |
| FileImage | 加载文件中的图片资源 |
| MemoryImage | 加载内存图片资源 |
| NetworkImage | 从网络加载图片 ,这个还是一个抽闲类 |
1.NetworkImageDemo
class NetworkImageDemo extends StatelessWidget {
const NetworkImageDemo({
Key key,
@required this.imageUrl,
}) : super(key: key);
final String imageUrl;
@override
Widget build(BuildContext context) {
return Image(
image: NetworkImage(
imageUrl,//图片的网络地址;\
),
width: 200,
height: 200,
// fit: BoxFit.fill ,
alignment: Alignment.topLeft,
color: Colors.red,
colorBlendMode: BlendMode.colorBurn,
repeat: ImageRepeat.repeatY,
);
}
}
class NetworkImageDemo2 extends StatelessWidget {
const NetworkImageDemo2({
Key key,
@required this.imageUrl,
}) : super(key: key);
final String imageUrl;
@override
Widget build(BuildContext context) {
return Image.network(
imageUrl,
width: 200,
height: 200,
// fit: BoxFit.fill ,
alignment: Alignment.topLeft,
color: Colors.red,
colorBlendMode: BlendMode.colorBurn,
repeat: ImageRepeat.repeatY,
);
}
}
2. AssetImageDemo
使用AssetImage要分4步走
- 1.创建资源文件夹
- 2.在pubspec.yaml中配置资源路径
- 3.运行pub get
- 4.根据路径使用图片
配置步骤.png
第四步,在代码中使用图片资源:
/*
* 使用资源文件中的图片需要3步
* 1.在flutter创建一个文件夹存放图片文件
* 2.在pubspec.yaml中配置图片路径
* 3.点击一下pub get
* 4.使用图片
* */
class AssetImageDemo extends StatelessWidget {
const AssetImageDemo({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Image(
image: AssetImage('assets/images/三味真火.png'),
);
}
}
3.Image设置圆角
//做一个圆角image
class CircleImage extends StatelessWidget {
const CircleImage({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return CircleAvatar(
radius: 350.0,
backgroundImage: AssetImage(
'assets/images/WechatIMG231.jpeg'
),
);
}
}
做圆角的方案还有很多种,这里只是给出其中一种方案
网友评论