Flutter中TabBar点击无法切换TabBarView页面问题求助

问题原因 #

1. TabBar被TabBarView覆盖：你用Stack将两个组件重叠放置，Stack中后添加的组件层级更高，导致TabBarView完全盖在TabBar上面，点击事件被TabBarView拦截，根本触发不到TabBar的点击逻辑。
2. 无效布局嵌套：Stack内部使用Expanded没有意义，因为Stack的子组件不遵循父级的flex布局规则；同时手动计算下方区域高度的方式也容易在不同设备上出现适配问题。

修复方案 #

把Stack替换为Column，让TabBar和TabBarView上下排列，同时用Expanded让TabBarView占满剩余空间，确保点击事件能正常触发。另外记得给TabController添加销毁逻辑，避免内存泄漏。

修改后的完整代码 #

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  // 新增：销毁TabController，避免内存泄漏
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 360.0,
            child: ClipPath(
              clipper: MyCliper(),
              child: Container(
                color: Colors.blue,
              ),
            ),
          ),
          // 移除固定高度的SizedBox，改用Expanded让下方区域占剩余空间
          Expanded(
            child: Column(
              children: [
                TabBar(
                  controller: _tabController,
                  tabs: const [
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                  ],
                ),
                // 用Expanded让TabBarView占满剩余空间
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: const [
                      Center(child: Text('Tab 1 Content')),
                      Center(child: Text('Tab 2 Content')),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class MyCliper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    final firstCurve = Offset(0, size.height - 20);
    final lastCurve = Offset(30, size.height - 20);
    path.quadraticBezierTo(
        firstCurve.dx, firstCurve.dy, lastCurve.dx, lastCurve.dy);
    final secondFirstCurve = Offset(0, size.height - 20);
    final secondLastCurve = Offset(size.width - 30, size.height - 20);
    path.quadraticBezierTo(secondFirstCurve.dx, secondFirstCurve.dy,
        secondLastCurve.dx, secondLastCurve.dy);
    final thirdFirstCurve = Offset(size.width, size.height - 20);
    final thirdLastCurve = Offset(size.width, size.height);
    path.quadraticBezierTo(thirdFirstCurve.dx, thirdFirstCurve.dy,
        thirdLastCurve.dx, thirdLastCurve.dy);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

关键改动说明 #

• 将包裹TabBar和TabBarView的Stack改为Column，让组件上下正常排列，避免重叠覆盖。
• 移除手动计算高度的SizedBox，改用Expanded让下方区域自动适配剩余屏幕空间，提升多设备兼容性。
• 给TabController添加dispose方法，在页面销毁时释放资源，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Miraj Hossain Shawon