图片显示
1、本地图片
Image.asset
加载项目资源包的图片
//先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets
Image.asset('images/pic1.jpg'),
/// 加载本地资源gif图片
Image.asset('images/timg.gif', height: 200, width: 200),
Image.file
加载手机内置或外置存储的图片
//加载Android平台的外置存储图片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE权限
Image.file(
File('/0/images/cat.jpg'),
width: 200,
height: 200,
)
2、网络图片
Image.network
无本地缓存
Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: 120,
height: 120
),
FadeInImage.assetNetwork
淡入效果,无本地缓存
/// 有的时候我们需要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片,这时候需要用到 FadeInImage 这个组件
FadeInImage.assetNetwork(
placeholder: 'images/avatar.png',
image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg',
width: 200,
height: 200
)
CachedNetworkImage
第三方控件,有本地缓存和淡入效果
https://github.com/renefloor/flutter_cached_network_image
//1、将依赖框架配置到pubspec.yaml文件
dependencies:
cached_network_image: ^2.5.0
//2、引入相关类
import 'package:cached_network_image/cached_network_image.dart';
//3、使用控件,默认自带图片淡入效果
CachedNetworkImage(
imageUrl: 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',
width: 200,
height: 200,
)
圆形头像
1、CircleAvatar
CircleAvatar(
//头像半径
radius: 60,
//头像图片
backgroundImage: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
),
使用 CircleAvatar 小部件,您所需要做的就是设置 radius 属性来确定圆形头像的大小。此外,您可以使用 backgroundImage 属性指定图像的 URL,小部件将自动创建圆形图像效果。
2、ClipOval
ClipOval( //圆形头像
child: new Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: 120.0,
),
),
3、Container + BoxDecoration
Container(
width: 120,
height: 120,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
fit: BoxFit.cover
)
)
)
通过将 BoxDecoration 与 BoxShape.circle 一起使用,您可以定义容器的圆形形状。但是,为了确保图像完全适合圆圈内,我们添加 clipBehavior: Clip.antiAlias 。这会剪辑图像以匹配圆形形状,从而创建无缝的圆形图像效果
4.ClipRRect
ClipRRect(
borderRadius: BorderRadius.circular(120),
child: Image.network(
'https://picsum.photos/seed/picsum/200/300',
fit: BoxFit.cover,
width: 120,
height: 120,
),
),
使用 ClipRRect 定义圆角矩形,并通过将 borderRadius 设置为 120 等值,确保角完全圆滑。由于指定的尺寸(宽度和高度),子图像适合此圆角矩形。fit: BoxFit.cover 属性确保图像覆盖整个区域,同时保持其纵横比。这会产生平滑的圆形图像效果。
5.Card
Card(
shape: const CircleBorder(),
clipBehavior: Clip.antiAlias,
elevation: 5,
child: Image.network(
'https://picsum.photos/seed/904/600',
width: 120,
height: 120,
fit: BoxFit.cover,
),
)
通过将 shape 设置为 CircleBorder() ,您可以为 Card 定义圆形形状。clipBehavior: Clip.antiAlias 属性确保子内容被剪裁以匹配圆形形状。这会产生干净的圆形图像效果。除此之外,您还可以指定卡片的不同属性,例如标高、阴影颜色等。
6.PhysicalModel
PhysicalModel(
color: Colors.transparent,
clipBehavior: Clip.antiAlias,
elevation: 5.0,
shape: BoxShape.circle,
child: Image.network(
'https://picsum.photos/seed/904/600',
width: 120,
height: 120,
fit: BoxFit.cover,
))
通过调整 elevation,可以增加图像的深度。shape: BoxShape.circle 确保圆形外观,使用 color: Colors.transparent ,小部件保持半透明。通过设置 borderRadius: BorderRadius.circular(10) ,您可以确定角的曲率。clipBehavior: Clip.antiAlias 确保子内容与圆角对齐。
圆角图片
- 一种是通过
Decoration
的实现类BoxDecoration
去实现。 - 一种是通过
ClipRRect
去实现。
其中 BoxDecoration
一般应用在 DecoratedBox
、 Container
等控件,这种实现一般都是直接 Canvas 绘制时,针对当前控件的进行背景圆角化,并不会影响其 child 。这意味着如果你的 child 是图片或者也有背景色,那么很可能圆角效果就消失了。
而 ClipRRect
的效果就是会影响 child 的,具体看看其如下的 RenderObject 源码可知。
1、ClipRRect
/// 使用裁剪来实现图片圆角
ClipRRect( //圆角图片
borderRadius: BorderRadius.circular(8),
child: Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: 120,
height: 120
),
),
2、Container + BoxDecoration
/// 使用边框来实现图片圆角
Container(
width: 120,
height: 120,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(8),
image: DecorationImage(
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
)
)
)
其他各种形状
使用ShapeDecoration可以做出各种形状
- 斜切角:
BeveledRectangleBorder
- 圆角:
RoundedRectangleBorder
- 超椭圆:
SuperellipseShape
- 体育场:
StadiumBorder
- 圆形:
CircleBorder
//斜切角形状示例
Container(
width: 120,
height: 120,
decoration: ShapeDecoration(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(16)
),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
)
)
)
上面转载的链接 https://www.cnblogs.com/joe235/p/11199042.html
下面是自己工作中用到的
容器左上角和右下角有弧度
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.zero,
bottomLeft: Radius.zero,
bottomRight: Radius.circular(20.0)),
)
容器左右两边有弧度
borderRadius:BorderRadius.all(Radius.circular(Dimens.rgap_dp25))
容器底部加根线
decoration: BoxDecoration(
color:Colors.white,
border: Border(
bottom: BorderSide(width:0.5,color:Colors.black12)
)
)
使用decoration实现颜色的渐变(左右渐变)
decoration: BoxDecoration(
gradient: LinearGradient(
begin: isOrientationLeftRight
? Alignment.centerLeft
: Alignment.topCenter,
end: isOrientationLeftRight
? Alignment.centerRight
: Alignment.bottomCenter,
colors: [gradientStart, gradientEnd]),
/*阴影设置
boxShadow: [
new BoxShadow(
color: Colors.grey[500],
blurRadius: 20.0,
spreadRadius: 1.0,
)
]*/
),
颜色混合图片
Row(children: <Widget>[
Image.asset('images/flutter_logo.png',
width: 100,
/// 混合的颜色,和colorBlendMode一起使用
color: Colors.red,
/// 颜色和图片混合模式,功能较强大,其它模式参见官方文档或源码
colorBlendMode: BlendMode.overlay),
Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100,
colorBlendMode: BlendMode.colorDodge,
color: Colors.blue)
], mainAxisAlignment: MainAxisAlignment.spaceBetween),
centerSlice图片内部拉伸
Image.asset('images/flutter_logo.png',
width: 250,
height: 250,
fit: BoxFit.contain,
centerSlice:
Rect.fromCircle(center: const Offset(20, 20), radius: 1)),
matchTextDirection图片内部方向
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Directionality(
textDirection: TextDirection.ltr,
child: Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
height: 150,
matchTextDirection: true,
fit: BoxFit.cover)),
Directionality(
textDirection: TextDirection.rtl,
child: Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
height: 150,
matchTextDirection: true,
fit: BoxFit.cover))
]),