Flutter无Appbar标签栏：实现跨选中标签的指示器求助

要实现这种特殊的Tab指示器，默认的TabBar指示器无法满足需求，需要自定义指示器并结合TabController监听Tab切换，计算指示器的宽度范围。以下是完整实现方案：

核心思路 #

1. 通过GlobalKey获取TabBar的渲染对象，计算每个Tab的宽度及间距。
2. 监听TabController的切换事件，实时计算从第一个Tab到当前选中Tab的总宽度（包含Tab间的padding）。
3. 自定义Decoration实现指示器，根据计算出的总宽度绘制从第一个Tab左边缘到当前选中Tab右边缘的矩形。

完整代码实现 #

import 'package:flutter/material.dart';

class RangeTabBarPage extends StatefulWidget {
  @override
  _RangeTabBarPageState createState() => _RangeTabBarPageState();
}

class _RangeTabBarPageState extends State<RangeTabBarPage> with SingleTickerProviderStateMixin {
  final GlobalKey<TabBarState> _tabBarKey = GlobalKey<TabBarState>();
  late TabController _tabController;
  double _indicatorTotalWidth = 0;
  // 对应TabBar的labelPadding
  final EdgeInsets _tabLabelPadding = EdgeInsets.only(left: 8, right: 5);

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, initialIndex: 0, vsync: this);
    _tabController.addListener(_updateIndicatorRange);
    // 首次布局完成后计算初始宽度
    WidgetsBinding.instance.addPostFrameCallback((_) => _updateIndicatorRange());
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void _updateIndicatorRange() {
    final tabBarState = _tabBarKey.currentState;
    if (tabBarState == null) return;

    final tabBarRenderBox = tabBarState.context.findRenderObject() as RenderBox;
    final tabChildren = (tabBarState.context.widget as TabBar).tabs;

    if (tabChildren.length != _tabController.length) return;

    double totalWidth = 0;
    for (int i = 0; i <= _tabController.index; i++) {
      // 获取每个Tab的渲染对象
      final tabRenderBox = tabBarState.context.childNodes[i].firstChild!.findRenderObject() as RenderBox;
      totalWidth += tabRenderBox.size.width;
      // 非最后一个选中的Tab，加上Tab间的padding
      if (i < _tabController.index) {
        totalWidth += _tabLabelPadding.left + _tabLabelPadding.right;
      }
    }
    // 加上第一个Tab的left padding
    totalWidth += _tabLabelPadding.left;

    setState(() => _indicatorTotalWidth = totalWidth);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 5),
            child: TabBar(
              key: _tabBarKey,
              controller: _tabController,
              isScrollable: true,
              labelColor: const Color(0xff5f2dea),
              labelPadding: _tabLabelPadding,
              unselectedLabelColor: Colors.black,
              // 使用自定义指示器
              indicator: _RangeTabIndicator(
                color: const Color(0xff5f2dea),
                totalWidth: _indicatorTotalWidth,
              ),
              tabs: const [
                Tab(text: "标签1"),
                Tab(text: "标签2"),
                Tab(text: "标签3"),
                Tab(text: "标签4"),
                Tab(text: "标签5"),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 10, right: 10),
            child: Container(
              height: 1250,
              decoration: const BoxDecoration(
                border: Border(
                  top: BorderSide(color: Color(0xffababab), width: 0.4),
                ),
              ),
              child: TabBarView(
                controller: _tabController,
                children: [
                  Container(child: const Center(child: Text("内容1"))),
                  Container(child: const Center(child: Text("内容2"))),
                  Container(child: const Center(child: Text("内容3"))),
                  Container(child: const Center(child: Text("内容4"))),
                  Container(child: const Center(child: Text("内容5"))),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 自定义Tab指示器
class _RangeTabIndicator extends Decoration {
  final Color color;
  final double height;
  final double totalWidth;

  const _RangeTabIndicator({
    required this.color,
    this.height = 2.0,
    required this.totalWidth,
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _RangeTabPainter(
      color: color,
      height: height,
      totalWidth: totalWidth,
      onChanged: onChanged,
    );
  }
}

class _RangeTabPainter extends BoxPainter {
  final Color color;
  final double height;
  final double totalWidth;

  _RangeTabPainter({
    required this.color,
    required this.height,
    required this.totalWidth,
    VoidCallback? onChanged,
  }) : super(onChanged);

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    // 指示器绘制在TabBar底部
    final bottom = offset.dy + configuration.size!.height - height;
    final rect = Rect.fromLTWH(
      offset.dx,
      bottom,
      totalWidth,
      height,
    );
    canvas.drawRect(rect, Paint()..color = color);
  }
}

关键说明 #

• 宽度计算：遍历从第一个到当前选中的Tab，累加每个Tab的宽度及Tab间的padding，确保指示器覆盖所有前置标签。
• 监听Tab切换：通过TabController的addListener方法，在Tab切换时重新计算指示器宽度，实时更新UI。
• 自定义指示器：继承Decoration实现自定义绘制逻辑，根据计算出的总宽度绘制矩形指示器。

内容的提问来源于stack exchange，提问作者Priya