Заставить TabBarView занять все оставшееся пространство - PullRequest
1 голос
/ 05 мая 2019

Новичок во Flutter и не могу понять, как наложить ограничения на размер моего интерфейса, чтобы ничего не переполнялось. Попытка сделать немного другой интерфейс с вкладками, где у меня есть некоторые компоненты над панелью вкладок. В основном я хочу что-то вроде этого:

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

Проблема в том, что я понятия не имею, как заставить TabBarView занимать оставшееся пространство. Мой пример кода даже не запускается, просто выдает ошибку вроде этого:

I / трепетание (3875): ══╡ ИСКЛЮЧЕНИЕ ВЫДЕРЖИВАЕТСЯ ВЫДАЮЩЕЙСЯ БИБЛИОТЕКОЙ ══════════════════════════ I / flutter (3875): во время выполнения executeResize () было сгенерировано следующее утверждение: I / flutter (3875): горизонтальная область просмотра была задана неограниченной высотой. I / flutter (3875): области просмотра расширяются по поперечной оси, чтобы заполнить их контейнер и ограничить их дочерние элементы для соответствия I / флаттер (3875): их экстент по поперечной оси. В этом случае горизонтальный видовой экран получил неограниченное количество I / флаттер (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 Ответ

1 голос
/ 12 мая 2019

Поместить TabBarView внутри Expanded виджет

...