Flutter页面中部TabBar添加页面内容致布局混乱，求解决方案

你当前的问题是仅添加了TabBar，但未搭配对应的TabBarView承载各标签页内容，同时布局结构未合理分配组件空间，导致布局混乱。按以下步骤修改即可实现正常的多页面切换：

关键修改点 #

• 确保TabController正确初始化并与页面生命周期绑定
• 在TabBar后添加TabBarView，并使用同一个TabController
• 用Expanded包裹TabBarView，让它自动占据剩余可用空间，避免布局溢出

修改后的完整代码示例 #

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

  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> with SingleTickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    super.initState();
    // 初始化TabController，长度与Tab数量对应
    tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // TabBar部分
          TabBar(
            unselectedLabelColor: Colors.black,
            labelColor: const Color.fromARGB(255, 3, 59, 161),
            tabs: const [
              Tab(text: '服务'),
              Tab(text: '产品'),
              Tab(text: '评价'),
            ],
            controller: tabController,
            indicatorSize: TabBarIndicatorSize.tab,
          ),
          const SizedBox(height: 8),
          // 用Expanded包裹TabBarView，占据剩余空间
          Expanded(
            child: TabBarView(
              controller: tabController,
              children: [
                // 第一个Tab对应的页面内容
                const Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "推荐服务",
                      style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                    ),
                    // 可继续添加服务页面的其他组件
                  ],
                ),
                // 第二个Tab对应的页面内容
                const Center(child: Text("产品页面内容")),
                // 第三个Tab对应的页面内容
                const Center(child: Text("评价页面内容")),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

注意事项 #

• 页面的State必须混入SingleTickerProviderStateMixin，为TabController提供动画所需的Ticker
• TabBar和TabBarView的controller必须是同一个实例
• 若页面内容较多，建议将每个Tab对应的页面抽成单独的Widget，保持代码整洁

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