Флаттер внизу навигации, где на одной странице есть вкладки - PullRequest
0 голосов
/ 13 февраля 2019

Я хотел бы создать эшафот с нижней панелью навигации и панелью приложений, которая всегда отображает заголовок текущей страницы.Когда я меняю опцию нижней панели, контент меняется явно.Все это хорошо с классической структурой NavigationBar.Но проблема начинается, когда на одной из страниц содержимого должны быть вкладки поверх них.У меня есть мой appbar, созданный в Scaffold родителей.Есть ли способ добавить вкладки в родительские виджеты appBar?

Моя страница AppBar + BottomNavBar:

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }
}
class _MainPageState extends State<MainPage> {

  int _currentPageIndex;
  List<Widget> _pages = List();

  Widget _getCurrentPage() => _pages[_currentPageIndex];

  @override
  void initState() {
    setState(() {
      _currentPageIndex = 0;

      _pages.add(BlocProvider(bloc: AgendaBloc(), child: AgendaPage()));
      _pages.add(SpeakersPage());
      _pages.add(MenuPage());
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar( title: 'Agenda'),
      body: _getCurrentPage(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentPageIndex,
        onTap: (index){
          setState(() {
            _currentPageIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.content_paste),
            title: Text('Agenda'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group),
            title: Text('Speakers'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.menu),
            title: Text('Menu'),
          ),
        ],
      ),
    );
  }
}

Теперь предположим, что я хочу, чтобы мой виджет AgendaPage отображал вкладки в верхней части окна.Есть ли простой, не хакерский способ сделать это?

Желаемый эффект: Tabs page

No Tabs page

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Вы можете использовать вложенные Scaffold виджеты.Это работает в Flutter 1.1.8:

// This is the outer Scaffold. No AppBar here
Scaffold(
  // Workaround for https://github.com/flutter/flutter/issues/7036
  resizeToAvoidBottomPadding: false, 
  body: _getCurrentPage(),  // AppBar comes from the Scaffold of the current page 
  bottomNavigationBar: BottomNavigationBar(
    // ...
  )
)
0 голосов
/ 13 февраля 2019

Насколько я знаю, вы не можете, но мне удалось решить эту проблему, добавив отдельный AppBar к каждой странице, перемещаемой через bottomNavigationBar:

, предоставьте каждый из ваших _pagesс отдельной панелью приложения и удалите основную из вашего build метода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...