再flutter里面的image组件有很多构造函数,今天只讲两个最常用的,分别是Image.asset, 本地图片(加载工程内的图片)和 Image.network 远程图片(加载网络图片),其余的今后用到再进行补充。
列表参数
image常用属性Image.network练习
import 'package:flutter/cupertino.dart';
void main(List<String> args) {
runApp(ImgBox());
}
class ImgBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 400,
height: 400,
color: Color.fromRGBO(222, 222, 12, 1),
child: Image.network(
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F83025aafa40f4bfbc1c101200d4f78f0f73618b4.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620696934&t=5e4fa02fb390a9e34ac30d56e923029d",
alignment: Alignment.centerRight,
fit: BoxFit.contain
),
)
);
}
}
image.png
Image.asset练习
使用本地图片再flutter里面相等叫麻烦。
首先在根目录下创建一个image文件夹,文件夹名字不唯一;
其次在文件下面创建几个尺寸名称文件夹:1.0x,2.0x,3.0x......
接着将对应尺寸放进文件夹里面,注意图片名称要一致;
最后在pubspec.yaml文件进行配置。
image.png
我们来使用看看
import 'package:flutter/cupertino.dart';
void main(List<String> args) {
runApp(ImgBox());
}
class ImgBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 400,
height: 400,
color: Color.fromRGBO(222, 222, 12, 1),
child: Image.asset(
"image/2.0x/atm.jpg",
alignment: Alignment.centerRight,
fit: BoxFit.contain
),
)
);
}
}
效果同上。
圆形图片
在实际操作中,我们会经常用到圆形的图片,来看看flutter有哪些方法可以设置圆形图片呢?
设置Container
既然我们把图片放在Container里面,那么自然可以将Container设置为圆形,从而达到实现图片的圆形效果。
import 'package:flutter/cupertino.dart';
void main(List<String> args) {
runApp(ImgBox());
}
class ImgBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Color.fromRGBO(222, 222, 12, 1),
// borderRadius: BorderRadius.circular(200)
borderRadius: BorderRadius.all(
Radius.circular(200)
),
image: DecorationImage(
image: AssetImage("image/2.0x/atm.jpg"),
fit: BoxFit.cover
)
),
)
);
}
}
注意经测试Container的color和decoration不能同时进行设置。
ClipOval
import 'package:flutter/cupertino.dart';
void main(List<String> args) {
runApp(ImgBox());
}
class ImgBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: ClipOval(
child: Image.asset(
"image/2.0x/atm.jpg",
width: 200,
height: 200,
fit: BoxFit.cover,
),
)
)
);
}
}
image.png
网友评论