自定义 Flutter TabBar indicator 的宽度和圆角，打造个性化导航体验

Flutter 问题系列第 14 篇

重塑 Flutter TabBar，掌握自定义 indicator 宽度和圆角的艺术

引言

在 Flutter 的广阔世界中，导航栏扮演着不可或缺的角色。其中，TabBar 凭借其直观且用户友好的设计脱颖而出，允许用户轻松切换应用程序的不同部分。然而，默认情况下，TabBar 的 indicator（即下划线）宽度固定，圆角半径为 0。为了满足个性化的需求和提升用户体验，本文将深入探讨如何自定义 TabBar indicator 的宽度和圆角，赋予其别具一格的视觉效果。

步入定制殿堂

1. 踏上宽度之旅

默认情况下，TabBar indicator 的宽度与标签文本的宽度相同。通过调整 PreferredSizeWidget 的 preferredSize 属性，我们可以重新定义 indicator 的宽度。

class _TabBarIndicatorPainter extends CustomPainter {
  ...

  // 设置 indicator 的宽度
  Size get preferredSize => Size(_indicatorWidth, _indicatorHeight);

  ...
}

2. 探索圆角奥秘

默认情况下，TabBar indicator 采用矩形形状。通过调整 Canvas 的 borderRadius 属性，我们可以赋予其优美的圆角。

void paint(Canvas canvas, Size size) {
  ...

  // 绘制圆角 indicator
  canvas.drawRRect(
    RRect.fromRectAndRadius(
      Rect.fromLTWH(0, 0, size.width, size.height),
      Radius.circular(_indicatorRadius),
    ),
    _indicatorPaint,
  );

  ...
}

3. 灵活配置，随心所欲

为了提供更大的灵活性，我们可以通过构造函数将 indicator 的宽度和圆角半径作为参数传入。

class CustomTabBar extends StatelessWidget {
  ...

  // 自定义 indicator 的宽度和圆角
  const CustomTabBar({
    Key? key,
    this.indicatorWidth = 20.0,
    this.indicatorRadius = 5.0,
  }) : super(key: key);

  ...
}

4. 应用实战，焕新体验

有了这些自定义选项，我们可以根据实际需求对 TabBar 进行定制。例如，在音乐播放器应用程序中，我们可以设置较宽的 indicator 以突出当前播放的歌曲。

TabBar(
  indicatorWidth: 50.0,
  indicatorRadius: 10.0,
  ...
)

结论

通过掌握 Flutter TabBar indicator 的宽度和圆角自定义，我们解锁了无限的可能性，可以打造出符合具体需求且具有美感的高级导航体验。无论是提升用户体验还是满足设计偏好，自定义 TabBar 都是一种强大的工具，它让我们能够超越默认限制，打造独一无二的移动应用程序。