持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第19天,点击查看活动详情
今日目标
今天来学习了解常用的控件Image,毕竟在我们制作的应用中图片是不可缺少的表现形式之一。
在我们的flutter中引入图片的方式有很多,今天我们只学习两个最常用的方式:
Image.asset 本地图片
Image.network 远程图片
Image组件的常用属性
属性 | 类型 | 说明 |
---|---|---|
alignment | Alignment | 图片的对齐方式 |
color和colorBlendMode | 设置图片的背景色,通常和colorBlendMode配合在一起使用,这样可以让图片颜色和背景色混合。 | |
fit | BoxFit | fit属性用来控制图片的拉伸和挤压 fill:全图希纳是,图片会被拉伸充满父容器 contain:全图显示,显示原比例,可能会有空隙 cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器同时保持不变形) fitWidth: 宽度充满,显示可能拉伸,可能裁切 fitHeight:高度充满,显示可能拉伸,可能裁切 scaleDown:效果和contain差不多,但是此属性不允许超过源图片大小,也就是显示可以缩小但不能放大。 |
repeat | ImageRepeat | repeat:横向和纵向都进行重复,直到铺满整个容器 repeatX:横向重复,纵向不重复 repeatY:纵向重复,横向不重复 |
width | 设置图片宽度 | |
height | 设置图片高度 |
Image.network
我们可以直接将图片放到center组件里就显示出来,不过还是建议大家放到Container
组件里,这样方便我们去控制它的显示形式
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('你太有才了-Flutter'),
),
body: HomeContent(),
));
}
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 800,
height: 400,
decoration: BoxDecoration(
color: Colors.yellowAccent,
),
child: Image.network(
'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
alignment: Alignment.bottomCenter,
color: Colors.blue,
colorBlendMode: BlendMode.softLight,
// fit: BoxFit.cover,
repeat: ImageRepeat.repeatX,
)
)
);
}
}
实现圆角和圆形图片
同上上面的例子我们轻松的在flutter中展示了一张网路图片,但是如果我们像展示的图片像掘金头像一样是一个圆形怎么搞呢?接下来继续一探究竟~\
方法1: 通过容器的borderRadius
属性实现
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(150),
image: DecorationImage(
image: NetworkImage('https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'),
fit: BoxFit.cover
)
),
);
}
}
方法2: 通过ClipOval
容器实现
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
// width: 300,
// height: 300,
child: ClipOval(
child: Image.network(
'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
width: 300,
height: 300,
fit: BoxFit.cover,
),
),
);
}
}
上面这两种方法我们都可以得到同样的效果
Image.asset
使用本地图片稍稍有点麻烦\
- step one
在项目的根目录下创建
images
文件夹,同时在这个文件内创建3.0x
和2.0x
两个文件夹,再将需要展示的图片复制到images
文件夹内,这里的3.0x和2.0x文件夹是用来存储对应不同dpi的图片的,flutter可以自行根据手机设备的dpi获取来设置不同比例下的同一张图片。 - step two
有了图片资源后,我们还需要在
pubspec.yaml
文件内声明我们要用到的图片资源,形如下图这样即可
当然了一个个写比较麻烦,你也可以直接声明images/
这个文件夹就可以了
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 300,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(150),
image: DecorationImage(
image: AssetImage('images/1.png'),
fit: BoxFit.cover
)
),
);
}
}
再来通过本地图片实现一次圆形图片,得到如下的效果
ending
持续学习,加油,如有不对的地方还请指正,谢谢~~