Flutter实现指定Tab Bar布局遇DefaultTabController错误求助

你的核心问题是TabBar（在AppBar底部）和TabBarView（在body的Stack中）没有共享同一个DefaultTabController，导致报错。需要把DefaultTabController放在能同时覆盖AppBar和body的父层级，也就是作为Scaffold的直接父组件。

以下是修改后的完整代码：

import 'package:felix_idn/library/widget/components/enums.dart';
import 'package:felix_idn/library/widget/components/path.dart';
import 'package:felix_idn/library/widget/ui/button.dart';
import 'package:felix_idn/library/widget/ui/text.dart';
import 'package:felix_idn/menu/music/music_therapy.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class MusicAmbient extends StatelessWidget {
  const MusicAmbient({super.key});

  @override
  Widget build(BuildContext context) {
    // 关键：用DefaultTabController包裹整个Scaffold，指定tab数量
    return DefaultTabController(
      length: 2, // 对应你设置的两个Tab
      child: Scaffold(
        appBar: AppBar(
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
            ],
          ),
          title: const Text('Flutter Tabs Example'),
        ),
        body: Container(
          color: Colors.black,
          child: SafeArea(
            child: Container(
              color: const Color.fromARGB(115, 55, 55, 55),
              child: Stack(
                children: [
                  // 返回按钮
                  Align(
                    alignment: Alignment.topLeft,
                    child: IconButton(
                      icon: const Icon(Icons.arrow_back_sharp),
                      iconSize: 32.0,
                      constraints: const BoxConstraints(),
                      padding: const EdgeInsets.all(3.0),
                      onPressed: () => Get.off(() => const MusicTherapy()),
                      color: Colors.white,
                    ),
                  ),
                  // 钢琴背景和Tab内容区
                  Align(
                    alignment: Alignment.topCenter,
                    child: Column(
                      children: [
                        const SizedBox(height: 40.0),
                        ImageButton(path: bgamb, callback: () => Get.back(), type: IconType.NONE),
                        // 用Expanded包裹TabBarView，避免布局溢出
                        Expanded(
                          child: const TabBarView(
                            children: [
                              MusicTherapy(),
                              MusicTherapy(),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  // 标题
                  Align(
                    alignment: Alignment.topCenter,
                    child: Column(
                      children: const [
                        SizedBox(height: 6.0),
                        Titles("Ambient", color: Colors.white, size: 20.0),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

额外优化说明：给TabBarView外层加上Expanded，因为它处于Column组件中，需要占据剩余空间，避免出现布局溢出的问题。

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