flutter - 画倒三角形
问题描述
我正在 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);
}
推荐阅读
- python - subprocess.communicate() 导致 python 程序在向 minecraft 服务器发送输入时挂起
- sql - 连接在 SQL Server 中使用填充零断开数字
- python - 如何根据条件拆分元组列表?
- json - 如何将varchar插入postgresql json列
- python - How to Get Rid of GPT-2 Warning Message?
- javascript - 如何在反应中将样式添加到正文的一部分
- android - 如何检测最后一次使用 Android 设备的时间?
- r - 尽管使用 GitHub 存储库,但无法为 R 4.0.2 安装吸墨纸或 quantstrat
- python - TypeError: object has nonetype' len() 并停止迭代
- vulkan - 每帧重新创建 RenderPass