flutter class TopArcClipper extends CustomClipperPath override Path getClipSize size final path = Path; final roundnessFactor = 50px; pathlineTo0 roundnessFactor; pathquadraticBe
要给弧度加上阴影,可以使用Container组件来包裹CustomClipper,并通过BoxDecoration属性设置阴影效果。
以下是修改后的代码示例:
class TopArcClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
final roundnessFactor = 50.px;
path.lineTo(0, roundnessFactor);
path.quadraticBezierTo(
size.width / 2,
0,
size.width,
roundnessFactor,
);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(TopArcClipper oldClipper) => false;
}
class TopArcClipperWithShadow extends StatelessWidget {
final Widget child;
const TopArcClipperWithShadow({Key key, this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
blurRadius: 5,
spreadRadius: 2,
),
],
),
child: ClipPath(
clipper: TopArcClipper(),
child: child,
),
);
}
}
然后,您可以在使用TopArcClipperWithShadow时将需要添加阴影的内容放在child属性中,如下所示:
TopArcClipperWithShadow(
child: YourContentWidget(),
)
这样就可以将阴影效果应用到弧度上了。
原文地址: https://www.cveoy.top/t/topic/jde1 著作权归作者所有。请勿转载和采集!