如何在导航栏中添加顶行 - Flutter [重复]

【问题标题】：How to add top lines in navbar - Flutter [duplicate]如何在导航栏中添加顶行 - Flutter [重复]
【发布时间】：2021-05-14 07:31:49
【问题描述】：

我对 Flutter 比较陌生，我想知道如何使这种设计成为可能。我假设我必须使用分隔线等，但我无法弄清楚如何使其工作。这是设计：

如果有任何建议或想法，我将不胜感激。感谢您的宝贵时间。

【问题讨论】：

这里已经有人问过了Link

标签： flutter dart design-patterns mobile

【解决方案1】：

您可以使用TabBar 通过创建自定义指标来实现它

标签栏( 指标：CustomIndicator()， ... )

class CustomIndicator extends Decoration {
  @override
  BoxPainter createBoxPainter([void Function() onChanged]) {
    return _TopIndicatorBox();
  }
}

class _TopIndicatorBox extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    Paint _paint = Paint()
      ..color = Colors.yellow
      ..strokeWidth = 5
      ..isAntiAlias = true;

    canvas.drawLine(offset, Offset(cfg.size.width + offset.dx, 0), _paint);
  }
}

【讨论】：