我需要在Flutter中实现这个:
我尝试创建一个
我原以为在
正确的方法是什么?我想我可以使用
Row
,并将背景设置为Text
来处理矩形,然后使用ClipPath
来制作三角形。这种方法的问题在于边缘不精确(您可以在下面的图像中看到矩形和三角形之间有一条细线),而且ClipPath
具有固定大小,因此如果我想在某个时候更改文本大小,就必须再次微调三角形。
这是我的代码:
class TriangleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(0.0, size.height);
path.lineTo(size.width / 3, size.height);
path.close();
return path;
}
@override
bool shouldReclip(TriangleClipper oldClipper) => false;
}
Row(
children: [
Container(
color: Colors.orange,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
"a label",
),
),
),
ClipPath(
clipper: TriangleClipper(),
child: Container(
color: Colors.orange,
height: 23,
width: 20,
),
)
],
)
我原以为在
ClipPath
的子元素中使用double.infinity
代替固定大小可以解决问题,但这样做会使三角形消失(可能变得太大了,我看不到它或者被其他东西遮挡了)。正确的方法是什么?我想我可以使用
ClipPath
来绘制梯形,但如何使其宽度适应Text
的长度?