как настроить положение виджета Tab, когда я помещаю виджет TaBar в виджет SafeArea

Я изменил вопрос из центра Tab, чтобы настроить положение Tab.
Поскольку я заметил, что Tab фактически центрирован и в соответствии с document, он просто добавляет отступы.
Но если вы хотите, чтобы TabBar избегал безопасной области или не выравнивал элементы на вкладках по центру (автоматически), я не могу найти способ сейчас.

screenshot
посмотрите на снимок экрана выше, значки / заголовки успешно избегают области черной полосы (за счет увеличения высоты панели вкладок), но не выравниваются по центру по вертикали. Я попытался поместить элемент Center, чтобы обернуть табар в виджет вкладок, он увеличил высоту на весь экран.

Я также попытался обернуть вкладку в виджет Container и получить набор свойств height, но, похоже, вся высота не соответствует безопасной области (добавив a const). И я попытался обернуть весь Scaffold виджетом SafeArea, но безопасная область стала черной, и мы действительно хотим, чтобы летучая мышь вкладки стала выше, а затем элемент макета в этом более высоком контейнере, а не просто переместить контейнер.

Таким образом, вопрос может заключаться в том, как настроить положение виджета Tab. потому что панель вкладок на самом деле центрирована, но дочерние элементы при ее компоновке избегают безопасной области, поэтому визуально она не выровнена по вертикали.

мой код:

@override
Widget build(BuildContext context) {
  final icons = [Icons.library_books, Icons.photo, Icons.toc];
  return Scaffold(
      bottomNavigationBar: Material(
        color: Theme.of(context).primaryColor,
        child: SafeArea(child: TabBar(
          controller: _tabController,
          tabs: _titles.map((t) {
            final i = _titles.indexOf(t);
            return Tab(
              text: t,
              icon: Icon(icons[i]),
            );
          }).toList(),
        ),),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          PostListPage(
            userid: widget.userid,
            username: widget.username,
          ),
          AlbumListPage(
            userid: widget.userid,
            username: widget.username,
          ),
          TodoListPage(
            userid: widget.userid,
            username: widget.username,
          ),
        ],
      )
      );
    }
}

person walker    schedule 13.08.2018    source источник
comment
Еще немного кода поможет. Но пробовали ли вы использовать виджет SafeArea в качестве родительского элемента для Scaffold, а не внутри BottomTabBar?   -  person chemamolins    schedule 14.08.2018
comment
@chemamolins - это весь метод сборки, простая демонстрационная страница, 3 вкладки с 3 вкладками. Я попытался использовать виджет SafeArea, обернув Scaffold, и безопасная область стала черной (в ней нет виджетов), и если я помещу SafeArea в bottomNavBar, по крайней мере, вся видимая область станет синей.   -  person walker    schedule 14.08.2018
comment
Да, но если я хочу воспроизвести вашу проблему, у меня нет остального кода. Небольшой пример, показывающий, что вы имеете в виду, был бы замечательным. Также сложно понять проблему по изображению. в чем именно проблема?: Что плитка списка не центрирована по вертикали?   -  person chemamolins    schedule 14.08.2018
comment
@chemamolins вопрос в том, что виджет вкладки не выровнен по вертикали по центру, как показано на изображении. не вещь listview. если значок и заголовок могут сместиться вниз более или менее на 10 пунктов, они центрируются по визуальному элементу. И я обнаружил, что он фактически выровнен по центру, просто добавил внешний отступ внизу, и я хочу отрегулировать положение   -  person walker    schedule 14.08.2018
comment
@chemamolins Я также опубликовал ответ в Твиттере в учетной записи Flutter.   -  person walker    schedule 14.08.2018


Ответы (1)


Хорошо, я думаю, что теперь понимаю, чего вы хотите, и боюсь, что это недостижимо.

Если вы не используете виджет SafeArea, полоса будет иметь нормальную высоту в полном низу, и все будет по центру. Его недостаток в том, что на iPhone X он находится над черной областью.

Но если вы хотите избежать черной полосы, вы должны использовать SafeArea (как и вы), которая добавляет некоторые отступы и немного подталкивает все вверх, таким образом избегая нижней «небезопасной» области.

Итак, это дополнение, добавленное SafeArea, которое не позволяет вам сдвигать (центрировать) заголовки и значки.

Возможный вариант - обернуть SafeArea Контейнером черного цвета, чтобы небезопасная область была черной.

child: Container(
  color: Colors.black,
  child: SafeArea(child: TabBar(
          controller: _tabController,
...
person chemamolins    schedule 15.08.2018
comment
поэтому, даже если я могу настроить положение элемента вкладки, я все равно должен знать, что добавлено дополнительное заполнение или нет (на разных устройствах), он будет становиться все более и более сложным. Теперь я просто оставлю его в покое с большим пустым пространством. . - person walker; 16.08.2018