TabBarView расширяется до дна независимо от начала

Я работал над флаттером, и теперь мне нужно создать панель вкладок для страницы. Поскольку мне удалось создать вкладки, но есть одна вещь, которая не позволяет мне выполнить мою задачу, а именно:

У меня есть план дизайна, который выглядит примерно так:

Column{
   mainAxisSize: MainAxisSize.max,
   crossAxisAlignment: CrossAxisAlignment.stretch,
   children: <widget>[
      Text("Hello World!"),
      Container(child: TabWidget())
   ]
}

Я не указал конкретную высоту контейнера TabWidget(), так как я хотел, чтобы вкладки занимали всю высоту до низа.

TabWidget

child: TabBar(
   controller: _controller,
   tabs: [
      new Tab(
         child: Padding(
           padding: EdgeInsets.only(top: 18.0),
           child: Text(""),
         )
      ),
      new Tab(
         child: Padding(
           padding: EdgeInsets.only(top: 18.0),
           child: Text(""),
         )
      ),    
    ]
    )
),
Container(
  //Deifining the height here, not deifing it will hide the content of the tabs
  height: MediaQuery.of(context).size.height/2.3,
  child: new TabBarView(
     controller: _controller,
     children: <Widget>[
        new Container(
          padding: EdgeInsets.only(top: 15.0),
          child: Listview(
            scrollDirection: Axis.Vertical,
            children: <Widget> [
               ...
            ]
          )
        ),
        new Container(
          padding: EdgeInsets.only(top: 15.0),
          child: Listview(
            scrollDirection: Axis.Vertical,
            children: <Widget> [
               ...
            ]
          )
        )  
      ]
    )
  )
  ]
);

Вот в чем загвоздка, теперь я старался изо всех сил, чтобы получить результат, и поэтому сделал следующее:

  1. Использование Expanded() в TabWidget для увеличения высоты
  2. Использование double.infinity() в элементе высоты TabBarView
  3. Я прочитал этот ответ: TabBarView без ограниченной высоты, но я не хочу, чтобы мой экран прокручиваемый, Silver в этом случае не требуется. Просто TabBarView следует развернуть до конца независимо от того, где он начинается

Я не хочу указывать конкретную высоту для моего TabBarView, вместо этого я хочу, чтобы он занимал полную высоту до низа независимо от экрана, поэтому моя высота является динамической в ​​соответствии с экраном.

Я хотел бы получить некоторые комментарии по этому поводу, чтобы достичь своей точки зрения. Я использую ListView() в дочернем элементе TabBarView, поэтому, даже если размер части экрана небольшой, пользователь телефона все равно сможет прокручивать содержимое. Но высота должна быть до низа, независимо от размера экрана. Спасибо.

Здесь приветствуются любые вопросы.


person Alok    schedule 04.03.2019    source источник


Ответы (1)


Если вы можете рассчитать высоту других виджетов на экране над tabBar, то, используя MediaQuery.of(context).size.height, вы получите высоту экрана. Вычтите оставшуюся высоту из высоты экрана, и вы можете использовать полученное значение.

P.S. Будьте осторожны с расчетами и вычтите все значения высоты, кроме вкладки, включая значение безопасной области, которое вы получите от MediaQuery.of(context).padding.top & MediaQuery.of(context).padding.bottom.

person Keshava Muraari    schedule 04.03.2019