如何使用颤振制作如下所示的自定义形状?

时间:2021-03-25 07:37:18

标签: flutter dart flutter-layout shapes

我是 Flutter 的新手,正在从事布局设计。

如何制作像下面这样的自定义形状,末端有两个锋利的边缘? 我可以使用 ShapeBorder 添加一个。

任何资源将不胜感激,谢谢。

Custom shape image

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),
),   

0 个答案:

没有答案