Flutter - Persisting BottomNavigationBar - как не показывать на некоторых страницах? - PullRequest
Новая
       25

Flutter - Persisting BottomNavigationBar - как не показывать на некоторых страницах?

0 голосов
/ 15 марта 2019

Моя реализация:

main.dart: - он строит несколько лесов (нижняя панель навигации создается на всех экранах выше дерева пользовательского интерфейса) 

runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "WP-seven",
    builder: (context, child) {
      return Scaffold(
        bottomNavigationBar: NavyBottomBar(navigator: (child.key as GlobalKey<NavigatorState>)),
        body: child,
      );
    },
    home: NewsList(0),
));

NavyBottomBar.dart: разделенный классдля виджета navBar.Здесь у нас есть глобальная клавиша навигатора, которая используется в main.dart для подключения к навигатору каждого ребенка (дочерний элемент - это каждый экранный виджет). 

final GlobalKey<NavigatorState> navigator;

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

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

Возможно, существует другой подход для достижения этого результата ..?

Ответы [ 2 ]

0 голосов
/ 15 марта 2019

Я нашел решение, и оно прекрасно работает, но сначала несколько слов о вышеупомянутом:

Hero не вариант, потому что он не поддерживает все типы навигации, например, pushReplacement и у меня была ошибка с анимацией в моем NavigationBar во время его использования, возможно, потому что у hero есть встроенный анимация тоже.

Решение:

  • Я создал новый экран под названием homePage (что-то вроде концентратора для навигации).
  • Там у нас есть вещь, называемая PageStorageBucket, которая полезна для хранения состояния на странице, которое сохраняется при переходах от одной страницы к другой. введите описание ссылки здесь

homePage.dart: 

Widget newsList;
Widget favorites;
Widget profile;
Widget answers;

List<Widget> pages;
Widget currentPage;

final PageStorageBucket bucket = PageStorageBucket();

@override
void initState() {
  newsList = NewsList(isFavorite: 0);
  favorites = NewsList(isFavorite: 1);
  profile = Profile(userID: widget.userID);
  answers = Answers();

  pages = [newsList, favorites, profile, answers];

  currentPage = newsList;
  super.initState();
}

Итак, мы добавили несколько виджетов (экранов) в корзину PageStorage, а затем используем их в Scaffold of homePage ... даже для этого есть место. 

@override
Widget build(BuildContext context) {
return Scaffold(
  body: PageStorage(
    child: currentPage,
    bucket: bucket,
  ),
  bottomNavigationBar: BottomNavyBar(
    currentIndex: currentTab,
    onItemSelected: (int index) async {
        setState(() {
          currentTab = index;
          currentPage = pages[index];
        });
    },
    items: [
      BottomNavyBarItem(
          icon: Icon(Icons.menu),
          title: Text('Новости'),
          activeColor: Colors.blue,
          inactiveColor: Colors.black
      ),
      BottomNavyBarItem(
          icon: Icon(Icons.favorite_border),
          title: Text('Избранное'),
          activeColor: Colors.red,
          inactiveColor: Colors.black
      ), 
     ],
    ),
   );
  }
 }

Работает отлично.

  • homePage Scaffold является постоянным и не перерисовывается при перенаправлении на другую страницу, поэтому мы можем использовать навигационные панели с анимацией и всем остальным.
  • Мы можем выбрать, какие страницы будут включены в эту область.
  • Мы все еще можем использовать Navigator.push и другие внутри этих экранов
  • Можно использовать multi-scaffold, например, когда вам нужны разные панели приложений, просто удалите appBar из homePage, и он будет использовать appBar из открытого экрана.
0 голосов
/ 15 марта 2019

Самый простой ответ на этот вопрос заключается в том, что вы должны просто создать нижнюю панель навигации на каждой отдельной странице. Сама панель навигации может быть помещена в собственный Stateless или StatefulWidget, чтобы вам не приходилось каждый раз указывать ее полностью. Если вы хотите, чтобы он выглядел как сохраняющийся между страницами, вы можете использовать для этого функциональность Hero флаттера.

Если это не то, что вы готовы сделать, вы можете использовать NavigatorObserver , чтобы переключать показ нижнего бара навигации или нет. Это также будет означать помещение MaterialApp / Scaffold / etc в StatelessWidget.

...