Flutter中如何在滑动时跳过处于禁用状态的Tab

要实现滑动时自动跳过内容为空的Tab，核心是自定义ScrollPhysics修改TabBarView的滑动逻辑，同时优化Tab的视觉样式和点击交互。

步骤1：维护Tab的启用状态 #

先定义方法判断每个Tab是否有数据（即是否启用）：

// 判断每个Tab的启用状态：有数据则启用，无数据则禁用
List<bool> get tabEnabledStatus {
  return [
    unfilteredList.isNotEmpty,
    filteredListByInProgress.isNotEmpty,
    filteredListByReady.isNotEmpty,
    filteredListByArchived.isNotEmpty,
  ];
}

步骤2：自定义滑动物理规则 #

创建自定义ScrollPhysics，让滑动时自动跳过禁用的Tab：

class SkippingDisabledTabPhysics extends ScrollPhysics {
  final TabController controller;
  final List<bool> tabEnabledStatus;

  SkippingDisabledTabPhysics({
    required this.controller,
    required this.tabEnabledStatus,
    ScrollPhysics? parent,
  }) : super(parent: parent);

  @override
  SkippingDisabledTabPhysics applyTo(ScrollPhysics? ancestor) {
    return SkippingDisabledTabPhysics(
      controller: controller,
      tabEnabledStatus: tabEnabledStatus,
      parent: buildParent(ancestor),
    );
  }

  @override
  Simulation? createBallisticSimulation(
    ScrollMetrics position,
    double velocity,
  ) {
    int currentIndex = controller.index;
    int targetIndex = currentIndex;

    if (velocity > 0) {
      // 向右滑动：寻找下一个可用的Tab索引
      targetIndex = currentIndex + 1;
      while (targetIndex < tabEnabledStatus.length && !tabEnabledStatus[targetIndex]) {
        targetIndex++;
      }
      if (targetIndex >= tabEnabledStatus.length) targetIndex = currentIndex;
    } else if (velocity < 0) {
      // 向左滑动：寻找上一个可用的Tab索引
      targetIndex = currentIndex - 1;
      while (targetIndex >= 0 && !tabEnabledStatus[targetIndex]) {
        targetIndex--;
      }
      if (targetIndex < 0) targetIndex = currentIndex;
    }

    if (targetIndex == currentIndex) {
      return super.createBallisticSimulation(position, velocity);
    }

    // 计算目标滑动位置并创建动画
    final double targetOffset = targetIndex * position.viewportDimension;
    return ScrollSpringSimulation(
      spring,
      position.pixels,
      targetOffset,
      velocity,
      tolerance: tolerance,
    );
  }
}

步骤3：更新TabBar和TabBarView #

• 修改TabBar，给禁用的Tab添加视觉提示（半透明+灰色文字）：

TabBar(
  tabs: [
    _buildTab("Show all", 0),
    _buildTab("InProgress", 1),
    _buildTab("Ready", 2),
    _buildTab("Archived", 3),
  ],
  onTap: (int index) => onTap(index),
  controller: _controller,
)

// 自定义Tab构建方法
Widget _buildTab(String text, int index) {
  bool isEnabled = tabEnabledStatus[index];
  return Opacity(
    opacity: isEnabled ? 1.0 : 0.5,
    child: Text(
      text,
      style: TextStyle(color: isEnabled ? null : Colors.grey),
    ),
  );
}

• 更新TabBarView，使用自定义滑动物理规则：

TabBarView(
  controller: _controller,
  physics: SkippingDisabledTabPhysics(
    controller: _controller,
    tabEnabledStatus: tabEnabledStatus,
  ),
  children: [
    CustomListView(list: unfilteredList),
    CustomListView(list: filteredListByInProgress),
    CustomListView(list: filteredListByReady),
    CustomListView(list: filteredListByArchived),
  ],
)

步骤4：优化点击逻辑 #

确保点击禁用Tab时不会触发切换：

void onTap(int index) {
  if (tabEnabledStatus[index]) {
    setState(() {
      _controller.index = index;
    });
  }
}

效果说明 #

当某个Tab（如Ready）无内容时：

• 该Tab显示为半透明灰色，点击无响应
• 从相邻Tab（如InProgress）向右滑动，会直接跳转到下一个可用Tab（如Archived）；从Archived向左滑动，直接跳转到InProgress

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