使TabBarView占用所有剩余空间 [英] Make TabBarView take up all remaining space

问题描述

Flutter的新手，无法弄清楚如何在我的UI上设置尺寸限制，因此不会溢出。尝试使用标签制作一些不同的用户界面，其中我在标签栏上方有一些组件。基本上我想要这样的东西：

New to Flutter and can't figure out how to put size constraints on my UI so nothing overflows. Trying to make a little bit different UI with tabs, where I have some components above the tab bar. Basically I want something like this:

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

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

The problem is, I have no idea how to make the TabBarView take up the remaining space. My code example wont even run, just gives me an error like this:

I / flutter（3875）：渲染库导致的异常╞════ ══════════════════════════════════════════════════ ═══
I / flutter（3875）：在performResize（）期间引发了以下断言：
I / flutter（3875）：水平视口的高度不受限制。
I / flutter（3875）：视口在横轴上扩展以填充其容器并约束其子项以匹配
I / flutter（3875）：其在横轴上的范围。在这种情况下，水平视口将获得无限量的
I / flutter（3875）：可在其中扩展的垂直空间。

I/flutter ( 3875): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 3875): The following assertion was thrown during performResize(): I/flutter ( 3875): Horizontal viewport was given unbounded height. I/flutter ( 3875): Viewports expand in the cross axis to fill their container and constrain their children to match I/flutter ( 3875): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of I/flutter ( 3875): vertical space in which to expand.

  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,
      ),
    );
  }

推荐答案

将TabBarView放入<$ c内$ c>扩展小部件

Put TabBarView inside Expanded widget

这篇关于使TabBarView占用所有剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！