使 TabBarView 占用所有剩余空间

Posted 2023-02-23

【中文标题】使 TabBarView 占用所有剩余空间

【英文标题】：Make TabBarView take up all remaining space

【发布时间】：2019-09-23 11:48:21

【问题描述】：

Flutter 新手，不知道如何在我的 UI 上设置大小限制，因此不会溢出。尝试使用选项卡制作一些不同的 UI，其中我在选项卡栏上方有一些组件。基本上我想要这样的东西：

--------------------
|     Container    |
--------------------
|      TabBar      |
--------------------
|                  |
|                  |
|    TabBarView    |
|                  |
|                  |
--------------------
|     Container    |
--------------------

问题是，我不知道如何让 TabBarView 占用剩余空间。我的代码示例甚至无法运行，只是给了我这样的错误：

I/flutter (3875): ══╡ 渲染库发现异常╞════════════════════════════════════ ══════════════════════════ I/flutter (3875)：在 performResize() 期间抛出了以下断言： I/flutter (3875)：水平视口被赋予了无限的高度。 I/flutter（3875）：视口在横轴上扩展以填充其容器并约束其子项以匹配 I/flutter (3875)：它们在横轴上的范围。在这种情况下，水平视口被赋予了无限量的 I/flutter (3875)：要扩展的垂直空间。

  Widget build(BuildContext context) 
    List<Tab> myTabs = <Tab>[
      Tab(text: 'TAB 1'),
      Tab(text: 'TAB 2'),
      Tab(text: 'TAB 3'),
    ];

    Widget topBar = Container(
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Text("TEXT 1"),
            Text("TEXT 2"),
            Text("TEXT 3"),
          ],
        ));

    Widget bottomBar = Row(
      children: <Widget>[
        RaisedButton(child: Text("Cancel")),
        RaisedButton(child: Text("OK")),
      ],
    );

    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Test"),
        ),
        body: Column(
          children: <Widget>[
            topBar,
            TabBar(
              tabs: myTabs,
            ),
            TabBarView(
              children: myTabs.map((Tab tab) 
                return Container(
                  color: Colors.red,
                  child: Text(tab.text)
                );
              ).toList(),
            ),
          ],
        ),
        bottomNavigationBar: bottomBar,
      ),
    );
  

【参考方案1】：

将 TabBarView 放入 Expanded 小部件