自定義 Flutter 選項卡欄指示器以在活動選項卡上顯示箭頭

Question

我想構建一個帶有向下箭頭的標簽欄，如下所示：

這是我目前擁有的：

這是我用來實現向上箭頭的代碼。 我從這個問題的答案中得到它：鏈接到我得到代碼的答案。

這是代碼：

class ArrowTabBarIndicator extends Decoration {
  final BoxPainter _painter;
  ArrowTabBarIndicator(
      {double width = 20, double height = 10, required Color color})
      : _painter = _ArrowPainter(width, height);

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

    class _ArrowPainter extends BoxPainter {
      final Paint _paint;
      final double width;
      final double height;
    
      _ArrowPainter(this.width, this.height)
          : _paint = Paint()
              ..color = Colors.white
              ..isAntiAlias = true;
    
      @override
      void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
        Path trianglePath = Path();
        if (cfg.size != null) {
          Offset centerTop =
              Offset(cfg.size!.width / 2, cfg.size!.height - height) + offset;
          Offset bottomLeft =
              Offset(cfg.size!.width / 2 - (width / 2), cfg.size!.height) + offset;
          Offset bottomRight =
              Offset(cfg.size!.width / 2 + (width / 2), cfg.size!.height) + offset;
    
          trianglePath.moveTo(bottomLeft.dx, bottomLeft.dy);
          trianglePath.lineTo(bottomRight.dx, bottomRight.dy);
          trianglePath.lineTo(centerTop.dx, centerTop.dy);
          trianglePath.lineTo(bottomLeft.dx, bottomLeft.dy);
    
          trianglePath.close();
          canvas.drawPath(trianglePath, _paint);
        }
      }
    }

請問如何使用相同的代碼使箭頭朝下？ 感謝有人可以提供建議。 先感謝您！

Answer 1

將箭頭包裹在 Container 中並添加參數變換

child: Container(
  transform: Matrix4.translationValues(0.0, -20.0, 0.0),
  child: ArrowTabBarIndicator(),
),