flutter - 颤振：自定义形状作为文本背景

Question

我需要在颤振中实现这一点：

我尝试制作 aRow并将背景设置Text为处理 ractangle，然后 aClipPath制作三角形。这样做的问题是边缘不精确（您可以在下图中看到矩形和三角形之间的细线），而且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,
            ),
          )
        ],
      )

我虽然double.infinity在 's child 中使用而不是固定大小ClipPath会解决它，但这样做会使三角形消失（可能它变得太大以至于我看不到它或落后于某些东西）。

解决这个问题的正确方法是什么？我想我可以使用 a 绘制梯形ClipPath，但是如何使它的宽度适应 的长度Text？

标签： fluttershapes

Answer 1

实现这一目标的一种方法就是这样。

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final w = size.width;
    final h = size.height;
    final triangleWidth = 10;

    final path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, h);
    path.lineTo(w, h);
    path.lineTo(w - triangleWidth, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}

并像这样使用它。

ClipPath(
    clipper: TriangleClipper(),
    child: Container(
      padding: EdgeInsets.fromLTRB(4, 4, 14, 4),   // 4 + triangleWidth for right padding
      color: Colors.orange,
      child: Text('A label'),
    ),
),