UI视觉效果图来自花瓣，由于没有标注和切图，就不追求1:1复刻了。实现的重点是音乐封面部分。拆解一下需求，一张图片被裁成同心圆环，背后有一个高斯模糊的阴影。
最终实现效果如下：
找张封面图，就开始今天的练习。
图片裁成同心圆环
图片裁成圆形的方式有很多，扒拉下来就像孔乙己告诉你茴字有四种写法。
其中有一种切圆形图片的方式是使用ClipPath，官方文档中已经指出按照Path裁切是耗性能的，只是用来切圆形就有点大炮打蚊子了。
Widget _buildAudioCoverWidget(Image image) {
return ClipPath.shape(
shape: const CircleBorder(),
child: image,
);
}
}
ClipPath是根据特定的path裁切图片，拿到Path后，那就是海阔凭鱼跃，天高任鸟飞。发挥想象力就好了。
不使用ClipPath.shape的静态方法， 在构造ClipPath时需要一个clipper参数，我们看类型。
CustomClipper<Path>? clipper;
自定义的CustomClipper需要两个实现方法。其中shouldReclip方法在接收到不同的clipper对象时判断是否需要重新Clip，这里用不到其他裁切效果，直接返回false。
class MyPathClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
return path;
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) {
return false;
}
}
关键的getClip方法，才是操纵path的地方。 先给path切一个圆形的轮廓。
Path getClip(Size size) {
var path = Path();
path.addOval(Offset.zero & size);
return path;
}
其实一通费劲下来才裁出了个圆形图片，还真不如一开始的三行代码。
Flutter中的Path和Android的很像，打洞关键在于PathFillType.evenOdd，这样path中添加两个圆就能达到同心圆环的效果了。
最终我们的自定义Clipper长这个样子：
class MyPathClipper extends CustomClipper<Path> {
static const double hollowRatio = 1 / 4;
@override
Path getClip(Size size) {
var path = Path();
path.addOval(Rect.fromCenter(
center: Offset(size.width / 2, size.height / 2),
width: size.width * hollowRatio,
height: size.height * hollowRatio));
path.addOval(Offset.zero & size);
path.fillType = PathFillType.evenOdd;
return path;
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) {
return false;
}
}
高斯模糊
使用ImageFiltered可以达到高斯模糊的效果。
Widget _buildAudioCoverWidget(Image image) {
return ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: ClipPath(
clipper: MyPathClipper(),
child: image,
),
);
}
}
但这么写有两个小问题，一个是边缘非常的突兀，另一个是边缘中间有一点黑黑的。
边缘突兀是因为高斯模糊处理图片后，模糊半径会让图片看着好像外溢一般，这里加个padding把位置空出来。边缘中间黑黑的是ImageFilter的tileMode属性，默认是TileMode.clamp不太自然，换成TileMode.decal会好很多。
Widget _buildAudioCoverWidget(Image image) {
return Padding(
padding: const EdgeInsets.all(20),
child: ImageFiltered(
imageFilter:
ImageFilter.blur(sigmaX: 10, sigmaY: 10, tileMode: TileMode.decal),
child: ClipPath(
clipper: MyPathClipper(),
child: image,
),
),
);
}
这样我们就得到了一个看着比较顺眼的高斯模糊封面图。
阴影效果
使用Stack，叠放一个高斯模糊的图，再叠放一张原图。
这里使用了一个小技巧，先让Stack内部居中，再通过padding个别调整位置。
Widget _buildAudioCoverWidget(Image image) {
var ring = SizedBox(
width: 220,
height: 220,
child: ClipPath(
clipper: MyPathClipper(),
child: image,
),
);
return Stack(
alignment: AlignmentDirectional.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(60, 60, 20, 20),
child: ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 10, sigmaY: 10, tileMode: TileMode.decal),
child: ring,
),
),
ring,
],
);
}
动起来
通过添加RotationAnimation，让这个封面转起来，由于封面图和阴影同时转，所以动画加在了一开始的Image上。
var rotateImage = RotationTransition(
turns: _controller,
child: Image.asset(
"images/01.webp",
fit: BoxFit.cover,
),
);
余下的不难，不再赘述了。
