Flutter中如何将TabBar从顶部移至钢琴图片下方中间位置？

当前代码中TabBar位于AppBar底部，需要将其移动到钢琴图片下方的中间位置，同时保证TabBar与TabBarView的联动正常。以下是修改后的完整实现代码及关键说明：

修改后的完整代码 #

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

  @override
  State<MusicAmbient> createState() => _MusicAmbientState();
}

class _MusicAmbientState extends State<MusicAmbient> with SingleTickerProviderStateMixin {
  late final TabController controller = TabController(length: 2, vsync: this);

  @override
  void dispose() {
    // 销毁时释放控制器资源，避免内存泄漏
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 移除原AppBar中的TabBar，保留基础导航栏（不需要可直接删除AppBar）
      appBar: AppBar(),
      body: Container(
        color: Colors.black,
        child: SafeArea(
          child: Container(
            color: const Color.fromARGB(115, 55, 55, 55),
            child: Column(
              children: [
                // 顶部区域：钢琴图片 + 居中TabBar
                Column(
                  children: [
                    ImageButton(path: bgamb, callback: () => Get.back(), type: IconType.NONE),
                    TabBar(
                      controller: controller,
                      isScrollable: false,
                      indicatorSize: TabBarIndicatorSize.tab,
                      tabs: const [
                        Tab(text: "Epic"),
                        Tab(text: "Relax"),
                      ],
                    ),
                  ],
                ),
                // 底部区域：占满剩余空间的Tab内容区
                Expanded(
                  child: TabBarView(
                    controller: controller,
                    children: const [
                      MusicEpic(),
                      MusicRelax(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键修改点说明 #

• 移除AppBar中的TabBar：删除原AppBar的bottom属性，让TabBar脱离顶部导航栏区域
• 替换Stack为Column布局：原Stack的层叠布局不适合垂直顺序排列需求，改用Column实现从上到下的线性布局，确保TabBar紧跟钢琴图片
• TabBar居中适配：通过isScrollable: false让TabBar固定宽度并自动居中，搭配indicatorSize让指示器匹配Tab宽度
• Expanded包裹TabBarView：让Tab内容区自动占满剩余屏幕空间，避免布局溢出或内容显示不全

额外优化技巧 #

• 若需要给TabBar添加自定义样式（如背景色、圆角），可用Container包裹TabBar，通过decoration属性实现：

  Container(
    decoration: BoxDecoration(
      color: Colors.grey[800],
      borderRadius: BorderRadius.circular(8),
    ),
    margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    child: TabBar(/* ... */),
  )
  

• 若钢琴图片需要自适应屏幕宽度，可给ImageButton添加width: double.infinity，确保图片撑满屏幕，TabBar会自动跟随居中

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