Flutter 弧度阴影：使用 CustomClipper 和 Container 实现

{ "title": "Flutter class TopArcClipper extends CustomClipper { \u0009@override \u0009Path getClip(Size size) { \u0009\u0009final path = Path(); \u0009\u0009final roundnessFactor = 50.px; \u0009\u0009path.lineTo(0, roundnessFactor); \u0009\u0009path.quadraticBezierTo(size.width / 2, 0, size.width, roundnessFactor); \u0009\u0009path.lineTo(size.width, size.height); \u0009\u0009path.lineTo(0, size.height); \u0009\u0009path.close(); \u0009\u0009return path; \u0009} \u0009@override \u0009bool shouldReclip(TopArcClipper oldClipper) => false; }给弧度加上阴影内容：要给弧度加上阴影，可以使用Container组件来包裹CustomClipper，并通过BoxDecoration属性设置阴影效果。\n\n以下是修改后的代码示例：\n\n\nclass TopArcClipper extends CustomClipper<Path> {\n @override\n Path getClip(Size size) {\n final path = Path();\n final roundnessFactor = 50.px;\n path.lineTo(0, roundnessFactor);\n path.quadraticBezierTo(\n size.width / 2,\n 0,\n size.width,\n roundnessFactor,\n );\n path.lineTo(size.width, size.height);\n path.lineTo(0, size.height);\n path.close();\n return path;\n }\n\n @override\n bool shouldReclip(TopArcClipper oldClipper) => false;\n}\n\nclass TopArcClipperWithShadow extends StatelessWidget {\n final Widget child;\n\n const TopArcClipperWithShadow({Key key, this.child}) : super(key: key);\n\n @override\n Widget build(BuildContext context) {\n return Container(\n decoration: BoxDecoration(\n boxShadow: [\n BoxShadow(\n color: Colors.grey.withOpacity(0.5),\n blurRadius: 5,\n spreadRadius: 2,\n ),\n ],\n ),\n child: ClipPath(\n clipper: TopArcClipper(),\n child: child,\n ),\n );\n }\n}\n\n\n然后，您可以在使用TopArcClipperWithShadow时将需要添加阴影的内容放在child属性中，如下所示：\n\n\nTopArcClipperWithShadow(\n child: YourContentWidget(),\n)\n\n\n这样就可以将阴影效果应用到弧度上了。