Flutter TabBar без AppBar

Я пытаюсь создать экран макета панели с вкладками без AppBar, хотя. Я уже упоминал решение по этой ссылке: как создать панель вкладок без панели приложения в флаттере? но это не работает для меня. Вот как выглядит мой экран, когда я помещаю TabBar в appbar: параметр:

enter image description here

Моя вкладка переместилась в верхний левый угол под строкой состояния, и все это сжимается в одном углу. Это почти как если бы это не там вообще.

Когда я использую класс AppBar, но передаю только параметр bottom: здесь происходит следующее:

enter image description here

Вверху TabBar находится некрасивое место, которое явно предназначено для заголовка AppBar. Вот мой код:

return new Scaffold(
      appBar: new TabBar(
        tabs: widget._tabs.map((_Page page){
          return Text(page.tabTitle);
        }).toList(),
        controller: _tabController,
        isScrollable: true,

      ),
      backgroundColor: Colors.white,
      body: new TabBarView(
          controller: _tabController,
          children: widget._tabs.map((_Page page){
            return new SafeArea(
                top:false,
                bottom: false,
                child: (page.page == Pages.cart?new CartHomeScreen():_lunchesLayout())
            );
          }).toList()
      ),
    );

Как я могу просто использовать TabBar без этого пробела сверху и можно ли заставить два элемента табуляции и их индикаторы растягивать и заполнять боковые пространства?

Ответы

Ответ 1

Ваш первый скриншот показывает, что он работает просто отлично - проблема в том, что "отлично" не совсем то, что вы ожидаете. Цвет текста по умолчанию - белый для вкладки, так что ваши ярлыки не отображаются, а только нижняя строка, что вы видите в левом верхнем углу. Кроме того, TabBar уже является виджетом предпочтительного размера, но он не имеет ту же высоту, что и панель приложений, поэтому, если вы этого хотите, он не будет выглядеть так.

Вот пример, который делает его похожим на панель приложения. kToolbarHeight - это та же константа, которую использует AppBar.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'msc',
      home: new DefaultTabController(
        length: 2,
        child: new Scaffold(
          appBar: new PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: new Container(
              color: Colors.green,
              child: new SafeArea(
                child: Column(
                  children: <Widget>[
                    new Expanded(child: new Container()),
                    new TabBar(
                      tabs: [new Text("Lunches"), new Text("Cart")],
                    ),
                  ],
                ),
              ),
            ),
          ),
          body: new TabBarView(
            children: <Widget>[
              new Column(
                children: <Widget>[new Text("Lunches Page")],
              ),
              new Column(
                children: <Widget>[new Text("Cart Page")],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Что приводит к этому:

Screenshot showing tabbed app bar

Изменить:

Как отмечено в комментариях и из этой проблемы с github, вы также можете использовать свойство FlexibleSpace AppBar, чтобы удерживать панель вкладок в основном таким же образом:

return new DefaultTabController(
  length: 3,
  child: new Scaffold(
    appBar: new AppBar(
      flexibleSpace: new Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          new TabBar(
            tabs: [
              new Tab(icon: new Icon(Icons.directions_car)),
              new Tab(icon: new Icon(Icons.directions_transit)),
              new Tab(icon: new Icon(Icons.directions_bike)),
            ],
          ),
        ],
      ),
    ),
  ),
);

Ответ 2

Я беру код из rmtmckenzie, но только для создания виджета без материального приложения

return new DefaultTabController(
      length: 3,
      child: new Scaffold(
        appBar: new PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: new Container(
            height: 50.0,
            child: new TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car,color: Colors.grey,)),
                Tab(icon: Icon(Icons.directions_transit,color: Colors.grey)),
                Tab(icon: Icon(Icons.directions_bike,color: Colors.grey)),
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_car),
            Icon(Icons.directions_transit),
            Icon(Icons.directions_bike),
          ],
        ),
      ),
    );

Ответ 3

Попробуйте поместить TabBar в AppBar на flexibleSpace реквизите.

Ответ 4

Просто используйте опору Flexiblespace, а не нижнюю опору appBar. Все в виджете safeArea, и вы можете добавить некоторые вертикальные отступы.

home: SafeArea(
        top: true,
        child: Padding(
          padding: const EdgeInsets.only(top: 10.0),
          child: DefaultTabController(
            length: 3,
            child: Scaffold(
              appBar: AppBar(
                flexibleSpace: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.1)),
                    Tab(icon: Icon(Icons.2)),
                    Tab(icon: Icon(Icons.3)),
                  ],
                ),
              ),
              body: TabBarView(
                children: [
                  Icon(Icons.1),
                  Icon(Icons.2),
                  Icon(Icons.3),
                ],
              ),
            ),
          ),
        ),
      )