如何在颤动中画一条带有尖角三角形的线？ [英] How to draw a line with a pointed triangle in Flutter?

问题描述

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

如何实现线上的三角形凹凸，如上图所示？我还是个初学者，不知道如何开始做这件事。

推荐答案

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

操作方法如下：

您需要使用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;
}

到此为止，您将获得相同的结果。

这篇关于如何在颤动中画一条带有尖角三角形的线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！