Flutter如何在Scaffold body中添加TabBar并解决无界高度异常

在Scaffold的body区域添加TabBar组件，用于切换「邮箱注册」「手机号注册」两种注册方式时，在滚动容器内按顺序放置TabBar与TabBarView组件后，运行阶段在performResize()抛出如下断言异常：

The following assertion was thrown during performResize(): Horizontal viewport was given unbounded height. Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.

异常含义：水平视口被分配了无界高度。视口在交叉轴方向会自动填充父容器并约束子元素匹配该方向尺寸，但当前水平视口获得了无限的垂直扩展空间。移除TabBar相关代码后原有逻辑可正常运行。

• TabBarView本质是水平滚动的视口（Viewport）组件，它的交叉轴为垂直方向，默认逻辑是撑满父容器给出的全部垂直高度约束
• 当TabBarView被直接放置在SingleChildScrollView、ListView这类可滚动容器内部时，可滚动容器不会对子组件的垂直高度设置上限，无界约束会直接触发上述异常

方案1：给TabBarView设置固定高度 #

如果两个注册页面的内容高度固定，直接给TabBarView外层包裹SizedBox指定明确高度即可，核心代码示例：

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      // 页面其他顶部元素（logo、标题等）
      const TabBar(
        // 补充TabBar的tabs、样式等配置
      ),
      SizedBox(
        height: 420, // 根据实际注册表单的高度调整数值
        child: TabBarView(
          // 补充TabBarView的子项，依次放入邮箱注册表单、手机号注册表单
        ),
      )
    ],
  ),
)

注意：如果Tab页内的内容高度不固定，固定高度方案可能出现内容溢出、底部留白的问题。

方案2：使用NestedScrollView做滚动联动（长内容场景推荐） #

如果注册表单内容较长需要支持整体滚动，使用NestedScrollView处理嵌套滚动逻辑，从根源上避免无界高度问题，核心结构示例：

DefaultTabController(
  length: 2, // 对应2个注册Tab
  child: Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          // 可放入页面顶部的logo、标题、提示语等固定头部内容
          SliverToBoxAdapter(
            child: TabBar(
              // 补充TabBar的样式、tabs配置
            ),
          )
        ];
      },
      body: TabBarView(
        // 直接放入两个注册页面组件，每个页面内部可单独处理自身滚动逻辑
        children: const [
          EmailRegisterForm(),
          PhoneRegisterForm(),
        ],
      ),
    ),
  ),
)

方案3：动态计算内容高度 #

如果既不想固定高度，也不适合用NestedScrollView结构，可以借助LayoutBuilder获取父容器传递的可用高度约束，动态给TabBarView赋值适配高度；如果父级是Column且不在滚动容器内，也可以给TabBarView包裹Expanded自动填充剩余可用高度。

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