制作一个
ShapeBorder像这样的自定义类(关键方法是
_getPath返回形状的
Path):
class CustomShapeBorder extends ShapeBorder { const CustomShapeBorder(); @override Path getInnerPath(Rect rect, {TextDirection textDirection}) => _getPath(rect); @override Path getOuterPath(Rect rect, {TextDirection textDirection}) => _getPath(rect); _getPath(Rect rect) { final r = rect.height / 2; final radius = Radius.circular(r); final offset = Rect.fromCircle(center: Offset.zero, radius: r); return Path() ..moveTo(rect.topLeft.dx, rect.topLeft.dy) ..relativeArcToPoint(offset.bottomRight, clockwise: false, radius: radius) ..lineTo(rect.center.dx - r, rect.center.dy) ..relativeArcToPoint(offset.bottomRight, clockwise: true, radius: radius) ..relativeArcToPoint(offset.topRight, clockwise: true, radius: radius) ..lineTo(rect.centerRight.dx - r, rect.centerRight.dy) ..relativeArcToPoint(offset.topRight, clockwise: false, radius: radius) ..addRect(rect); } @override EdgeInsetsGeometry get dimensions { return EdgeInsets.all(0); } @override ShapeBorder scale(double t) { return CustomShapeBorder(); } @override void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) { }}现在您可以像这样使用它:
Container( margin: EdgeInsets.only(top: 80), height: 50, width: double.infinity, decoration: ShapeDecoration( shape: CustomShapeBorder(), //color: Colors.orange, gradient: LinearGradient(colors: [Colors.blue, Colors.orange]), shadows: [ BoxShadow( color: Colors.black, offset: Offset(3, -3), blurRadius: 3), ], ), ),
结果:



