我花了太多时间寻找类似的解决方案,但似乎地球上没有人在实施这样的设计。我想用这样的指示器指示选定的 TabBar 标签:
目前看起来是这样的:
当前 TabBar 代码:
const TabBar(
indicator: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.blue, width: 5),
),
),
labelPadding: EdgeInsets.zero,
tabs: [
_Tab(icon: Icons.home, text: 'Home'),
_Tab(icon: Icons.settings, text: 'Settings'),
_Tab(icon: Icons.cleaning_services, text: 'Clean'),
_Tab(icon: Icons.construction, text: 'Service'),
_Tab(icon: Icons.library_books, text: 'Resources'),
],
),
)
有人知道这应该是什么样子吗?
答案 0 :(得分:2)
您必须创建自己的装饰。看看这个指南:https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c
它会在选项卡下创建一个自定义点,因此您可以复制它以创建您的指标类型
答案 1 :(得分:0)
谢谢,BabC。
最终结果如下:
class _TabIndicator extends Decoration {
final BoxPainter _painter;
_TabIndicator() : _painter = _TabIndicatorPainter();
@override
BoxPainter createBoxPainter([onChanged]) => _painter;
}
class _TabIndicatorPainter extends BoxPainter {
final Paint _paint;
_TabIndicatorPainter()
: _paint = Paint()
..color = Colors.blue
..isAntiAlias = true;
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
final double _xPos = offset.dx + cfg.size.width / 2;
canvas.drawRRect(
RRect.fromRectAndCorners(
Rect.fromLTRB(_xPos - 20, 0, _xPos + 20, 5),
bottomLeft: const Radius.circular(5.0),
bottomRight: const Radius.circular(5.0),
),
_paint,
);
}
}