如何在 Flutter 中画一条带尖三角形的线？

Posted 2023-02-23

【中文标题】如何在 Flutter 中画一条带尖三角形的线？

【英文标题】：How to draw a line with a pointed triangle in Flutter?

【发布时间】：2020-03-10 05:01:58

【问题描述】：

我正在考虑实施以下设计。

如上图所示，如何实现线上的三角形凹凸？我是新手，不知道如何开始。

【问题讨论】：

***.com/a/57943257/2252830

【参考方案1】：

很简单，你只需要了解如何使用剪刀。

方法如下：

你需要使用ClipPath

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.lightGreen,
      appBar: AppBar(
        title: Text("test"),
        backgroundColor: Colors.deepOrange,
      ),
      body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 200,
            color: Colors.red,
            child: Center(
              child: Text("Download"),
            ),
          ),
          ClipPath(
            clipper: TriangleClipper(),
            child: Container(
              color: Colors.red,
              height: 10,
              width: 20,
            ),
          )
        ],
      )),
    );
  

并添加您的自定义剪辑器：

class TriangleClipper extends CustomClipper<Path> 
  @override
  Path getClip(Size size) 
    final path = Path();
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width / 2, size.height);
    path.close();
    return path;
  

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

就是这样，你会得到相同的结果。

【讨论】：

它工作正常，但我看到的唯一问题是矩形和这个被剪裁的元素之间有一个小间隙。

@Mysticmonk 你看到我发布的链接了吗？

@pskink，我刚看到。我认为这是一种更清洁的方式。我能够让它与 ShapeBorder 一起使用。谢谢！

现在有了 ShapeBorder，我看到在我小时候放置的任何文本中都添加了一条双线。我正在寻找是否有任何配置可以删除它，找不到任何

但我认为这是一个不同的问题***.com/questions/47114639/…

【参考方案2】：

就是这样

   ClipPath(
                clipper: ClipperStack(),
                child: Container(
                  height: 100,
                  color: Colors.pink,
                  child: Center(child: Text("DOWNLOAD")),
                ),
              ),

class ClipperStack extends CustomClipper<Path> 
  @override
  Path getClip(Size size) 
    Path path = Path();

    path.moveTo(0.0, 0.0);
    path.lineTo(0.0, size.height-10);
    path.lineTo((size.width / 2 )-5, size.height-10);


    path.lineTo(size.width / 2, size.height);


    path.lineTo((size.width / 2)+5, size.height-10);
    path.lineTo(size.width, size.height-10);


    path.lineTo(size.width, 0.0);

    return path;
  

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;