flutter - 画倒三角形

Question

我正在Flutter中构建自定义TabBar，并尝试使用标签下方的特定路径绘制一个倒三角形(作为指示器)。并使指示器在选定的选项卡上移动。

这是我到目前为止所拥有的

class TriangleTabIndicator extends Decoration {
  final BoxPainter _painter;

  TriangleTabIndicator({@required Color color, @required double radius})
      : _painter = DrawTriangle(color);

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class DrawTriangle extends BoxPainter {
  Paint _paint;

  DrawTriangle(Color color) {
    _paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;
  }

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset triangleOffset =
        offset + Offset(cfg.size.width / 2, cfg.size.height - 10);
    var path = Path();

    path.moveTo(triangleOffset.dx, triangleOffset.dy);
    path.lineTo(triangleOffset.dx + 10, triangleOffset.dy + 10);
    path.lineTo(triangleOffset.dx - 10, triangleOffset.dy + 10);

    path.close();
    canvas.drawPath(path, _paint);
  }
}

上面吐出了一个等腰三角形。现在我需要反转这个三角形。

这是TabBar小部件

TabBar(
   controller: _tabController,
   indicator: TriangleTabIndicator(color: Colors.white, radius: null),
   isScrollable: true,
   indicatorPadding: EdgeInsets.zero,
   labelPadding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 10.0),
   tabs: <Widget>[],
),

Answer 1

如果要使三角形指向下方...

将您的paint方法更改为以下代码:

  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset triangleOffset = offset + Offset(cfg.size.width / 2, cfg.size.height);
    var path = Path();

    path.moveTo(triangleOffset.dx, triangleOffset.dy);
    path.lineTo(triangleOffset.dx + 10, triangleOffset.dy - 10);
    path.lineTo(triangleOffset.dx - 10, triangleOffset.dy - 10);
    path.close();

    canvas.drawPath(path, _paint);
  }