如何在导航栏中添加顶行 - Flutter

Question

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

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

Answer 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);
  }
}

如何在导航栏中添加顶行 - Flutter

How to add top lines in navbar - Flutter

mobile

design-patterns

dart

flutter