作者：向日葵渴望 | 来源：互联网 | 2023-07-23 16:14
Image组件有很多构造函数，这里只说两个。Image.asset 本地图片1.在根目录新建文件夹images2.在images文件夹下建立两个文件夹images2.0x imag
Image组件有很多构造函数，这里只说两个。
1.在根目录新建文件夹 /images
2.在 images 文件夹下建立两个文件夹 /images/2.0x /images/3.0x
3.在 /image 下放最小的图片，依次放较大的图片在 2.0x，3.0x
4.在pubspec.yaml声明添加的图片文件
flutter:
assets:
- images/123.ipeg
- images/2.0x/123.jpeg
- images/3.0x/123.jpeg
5.在代码中就可以使用了
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "imageWidget",
home: Scaffold(
body: Container(
child: Image.asset("images/123.jpeg")
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "imageWidget",
home: Scaffold(
body: Container(
child: Image.network("https://pics4.baidu.com/feed/1ad5ad6eddc451dabefc4f0ffc208b63d116322a.jpeg?token=a3becc48305b35b82b59db0e88d5cdc5&s=15F057864E5469D2CA11C17E03001013")
),
),
);
}
}
| 名称 |
类型 |
说明 |
|
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 才能看到效果（ClipOval 直接自适应成圆形或椭圆型图片）
|
|
height
|
|
高度 一般结合 ClipOval 才能看到效果（ClipOval 直接自适应成圆形或椭圆型图片）
|
京公网安备 11010802041100号