我正在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>[],
),
如果要使三角形指向下方...
将您的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);
}