提问人:Nns_ninteyFIve 提问时间:10/4/2023 最后编辑:Nns_ninteyFIve 更新时间:10/4/2023 访问量:66
如何在 Flutter 中制作这样的自定义形状边框,我想在工具提示中使用这个形状
how to make a custom shape border like this in flutter , i want to use this shape in toolTip
问:
在这里,我做了一些事情,但我需要更改箭头的长度,如何减少箭头的长度,如何在此代码中做到这一点。
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;
}
这里我附上了我想要实现的图片,就这样我想把这个放进一个shapeDecoration的toolTip里面。
答:
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 上,我已经测试了它,它工作正常,看起来就像三角形,底部有小曲线,为此你可以使用二次火盆曲线
评论