Flutter中TabBarView嵌套ListView无法自适应填充剩余高度问题求助

问题根因 #

错误的核心是嵌套Column无明确高度约束：外层Column没有给内部的DefaultTabController传递高度上限，你直接给内层Column的TabBarView套Expanded时，布局系统无法计算可用高度，就会抛出边界无限制的错误。

具体修改步骤 #

• 第一步：给DefaultTabController外层包裹Expanded，占用外层Column除了顶部"Home"文本之外的所有剩余可用高度，让DefaultTabController获得明确的高度约束。
• 第二步：删除包裹TabBarView的固定高度500的Container，给TabBarView自身套Expanded，此时内层Column已经有明确的高度限制，Expanded会自动让TabBarView占满除了TabBar之外的所有剩余高度，刚好适配到屏幕底部不会溢出。

修正后完整代码 #

Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: const EdgeInsets.only(bottom: 15, top: 6),
              padding: const EdgeInsets.only(left: 15),
              child: const Text('Home'),
            ),
            // 给DefaultTabController套Expanded，获取外层剩余高度
            Expanded(
              child: DefaultTabController(
                length: 2,
                initialIndex: 0,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Container(
                      child: TabBar(
                        isScrollable: true,
                        tabs: [
                          Tab(text: 'Subscriptions'),
                          Tab(text: 'Recently Visited'),
                        ],
                      ),
                    ),
                    // 删除固定高度，给TabBarView套Expanded占用内层Column剩余高度
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(color: Colors.grey, width: 0.5))),
                        child: TabBarView(
                          children: <Widget>[
                            buildAList(),
                            buildAList()
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildAList() {
    return ListView(
      scrollDirection: Axis.vertical,
      // 已有明确高度约束，shrinkWrap可删除避免额外性能消耗
      // shrinkWrap: true,
      children: List<Widget>.generate(
        100,
        (i) => Text(
          'Item $i',
          style: TextStyle(fontSize: 20),
        ),
      ).toList(),
    );
  }

补充说明 #

用MediaQuery.of(context).size.height直接设置高度会溢出，是因为没有扣除顶部状态栏、导航栏、顶部"Home"文本、TabBar的高度，直接套用全屏高度必然超出页面可视范围。给ListView套Expanded无效，是因为TabBarView本身没有获得高度约束，内部子组件怎么设置都无法确定布局边界。

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