我是 Flutter 的新手,正在从事布局设计。
如何制作像下面这样的自定义形状,末端有两个锋利的边缘?
我可以使用 ShapeBorder
添加一个。
任何资源将不胜感激,谢谢。
class MessageBorder extends ShapeBorder {
final bool usePadding;
MessageBorder({this.usePadding = true});
@override
EdgeInsetsGeometry get dimensions =>
EdgeInsets.only(bottom: usePadding ? 20 : 0);
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) {
rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, 20),);
return Path()
..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(0)))
..moveTo(0, rect.bottomCenter.dy)
..relativeLineTo(0, 20)
..relativeLineTo(20, -20)
..close();
}
@override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}
@override
ShapeBorder scale(double t) => this;
}
用法
Container(
height: 64,
decoration: ShapeDecoration(
color: Colors.green, shape: MessageBorder()),
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 8),
),