如何在 Flutter 中制作这样的自定义形状边框,我想在工具提示中使用这个形状

how to make a custom shape border like this in flutter , i want to use this shape in toolTip

提问人:Nns_ninteyFIve 提问时间:10/4/2023 最后编辑:Nns_ninteyFIve 更新时间:10/4/2023 访问量:66

问:

在这里,我做了一些事情,但我需要更改箭头的长度,如何减少箭头的长度,如何在此代码中做到这一点。

class ToolTipCustomShape extends ShapeBorder {
  final bool usePadding;

  const ToolTipCustomShape({this.usePadding = true});

  @override
  EdgeInsetsGeometry get dimensions =>
      EdgeInsets.only(bottom: usePadding ? 20 : 0);

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) => Path();

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    rect =
        Rect.fromPoints(rect.topLeft, rect.bottomRight - const Offset(0, 20));
    return Path()
      ..addRRect(
          RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 1)))
      ..moveTo(rect.bottomCenter.dx + 90 , rect.bottomCenter.dy)
      ..relativeLineTo(10, 20)
      ..relativeLineTo(10, -20)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}

  @override
  ShapeBorder scale(double t) => this;
}

enter image description here

这里我附上了我想要实现的图片,就这样我想把这个放进一个shapeDecoration的toolTip里面。

Flutter 用户界面 工具提示 用户体验

评论


答:

0赞 Md. Yeasin Sheikh 10/4/2023 #1

你可以像这样移动它

return Path()
  ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 1)))
  ..moveTo(rect.bottomRight.dx * .7, rect.bottomCenter.dy)
  ..relativeLineTo(10, 20)
  ..relativeLineTo(10, -20)
  ..close();

..moveTo(rect.width * .7, rect.bottomCenter.dy)

..moveTo(rect.bottomRight.dx - rect.height * .7, rect.bottomCenter.dy) // the one suit you

评论

0赞 Nns_ninteyFIve 10/4/2023
我使用了这段代码,但这不会改变箭头的长度,而是会改变箭头的位置
0赞 Md. Yeasin Sheikh 10/4/2023
你能澄清一下你想改变哪个轴吗?
0赞 Nns_ninteyFIve 10/5/2023
我不知道那个箭头是哪个轴,我想实现就像我上面提到的图像一样,在代码中该类应该扩展 ShapeBorder 类。 请帮忙
0赞 Md. Yeasin Sheikh 10/5/2023
是的,你可以把它放在 ShapeBorder 上,我已经测试了它,它工作正常,看起来就像三角形,底部有小曲线,为此你可以使用二次火盆曲线