Как реализовать экраны, которые всегда имеют AppBar и BottomNavigationBar - PullRequest
Новая
       16

Как реализовать экраны, которые всегда имеют AppBar и BottomNavigationBar

0 голосов
/ 22 октября 2019

У меня 3 экрана - home, friends и profile. Я хочу, чтобы AppBar и BottomNavigationBar всегда присутствовали на всех моих экранах. Прямо сейчас у меня есть AppBar и BottomNavigationBar, определенные внутри Scaffold в файле main.dart. При каждом нажатии опции на BottomNavigationBar тело Scaffold заменяется содержимым экрана выбора.

main.dart: 

Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: SafeArea(
      child: Container(
        child: _pageOptions[_selectedPage],
      ),
    ),
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _selectedPage,
      onTap: (int index) {
        setState(() {
          _selectedPage = index;
        });
      },
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home), title: Text('Home')),
        BottomNavigationBarItem(
            icon: Icon(Icons.people), title: Text('Friends')),
        BottomNavigationBarItem(
            icon: Icon(Icons.person), title: Text('Profile'))
      ],
    ),
  ),
  routes: <String, WidgetBuilder>{
    '/home': (BuildContext context) => Home(),
    '/friends': (BuildContext context) => Friends(),
  },
);
}

Теперь у меня есть пользовательский avatar виджет, который я повторно использовал на экране home. При нажатии avatar я хочу отобразить экран friends. Я попробовал этот код внутри onTap метода в avatar: 

{Navigator.pushNamed(context, '/friends')},

friends.dart: 

Widget build(BuildContext context) {
    return Container(
        child: Text('Friends'),
    );
}

При нажатии avatar, яЯ получаю экран friends, но все остальное потеряно (AppBar, BottomNavigationBar и т. д.).

Как мне этого добиться? Должен ли я возвращать эшафот с AppBar, BottomNavigationBar и т. Д. Со всех 3 моих экранов? Это негативно влияет на производительность? Или есть способ сделать это, просто заменив тело Scaffold в main.dart?

Ответы [ 2 ]

0 голосов
/ 22 октября 2019

Да, вам нужно вернуть эшафот с панелью приложения на всех трех экранах. Вы можете поместить панель приложения в отдельный класс statelesswidget и использовать его во всех трех скаффолдах. То же самое для нижней панели навигации. Вы можете попытаться сохранить возвращаемый виджет в методе сборки const. Будет недоступно для панели приложений, так как заголовок будет отличаться. Он не будет восстановлен, поэтому не стоит беспокоиться о производительности.

0 голосов
/ 22 октября 2019

Вы можете использовать PageView для ваших страниц в теле Scaffold виджета.

Просто меняйте страницы по щелчкам на панели навигации.

правки

  • просмотр страницы 

    PageView.builder(
  controller: pageController,
  physics: NeverScrollableScrollPhysics(),
  scrollDirection: Axis.vertical,
  itemCount: pages.length,
  itemBuilder: (context, index) {
    return getPage(index);
  });

  • onTap изменить номер страницы, затем setState(() {}); виджета.

  • init для просмотра страницы 

    PageController pageController = PageController(
 initialPage: pageNumber, keepPage: true);
...