Flutter中如何在SingleChildScrollView内使用TabBar组件

我们尝试构建如附图所示的UI，其中Column内的数据可滚动。
如您所见，页面底部需要使用Flutter的TabBar组件。
该组件需要包裹在Expanded中。
请问实现该场景的最佳方案是什么？

要实现这个布局，核心是让可滚动内容占据TabBar之外的剩余屏幕空间，同时避免布局溢出，以下是具体实现方案：

1. 核心布局逻辑 #

用Column作为根容器，拆分出两个核心区域：

• 顶部可滚动内容区：通过Expanded包裹SingleChildScrollView，自动填充TabBar之外的剩余空间
• 底部固定TabBar：结合DefaultTabController确保TabBar功能正常

2. 完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const ScrollableTabPage());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("滚动内容+底部TabBar")),
        body: DefaultTabController(
          length: 3, // 根据需求调整Tab数量
          child: Column(
            children: [
              // 可滚动内容区域
              Expanded(
                child: SingleChildScrollView(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                  child: Column(
                    children: List.generate(25, (index) {
                      return Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: Container(
                          height: 75,
                          color: Colors.grey[200],
                          alignment: Alignment.center,
                          child: Text("内容项 ${index + 1}"),
                        ),
                      );
                    }),
                  ),
                ),
              ),
              // 底部固定TabBar
              const TabBar(
                labelColor: Colors.blueAccent,
                unselectedLabelColor: Colors.grey,
                indicatorColor: Colors.blueAccent,
                tabs: [
                  Tab(icon: Icon(Icons.home_filled), text: "首页"),
                  Tab(icon: Icon(Icons.search), text: "搜索"),
                  Tab(icon: Icon(Icons.person), text: "我的"),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 关键细节说明 #

• Expanded的作用：强制可滚动区域填充屏幕剩余空间，既保证TabBar固定在底部，又避免内容溢出屏幕
• SingleChildScrollView：包裹内部Column，当内容高度超过分配空间时自动触发滚动
• DefaultTabController：必须包裹整个布局，为TabBar提供基础控制逻辑；如果需要Tab切换对应不同页面，可将SingleChildScrollView替换为TabBarView，并给每个Tab页嵌套SingleChildScrollView实现页面内滚动

内容的提问来源于stack exchange，提问作者Muhammad Kamran Nazir