Вложенный BottomNavigationBar приводит к Duplicate appBar - PullRequest
Новая
       89

Вложенный BottomNavigationBar приводит к Duplicate appBar

0 голосов
/ 06 августа 2020

У меня есть вложенный BottomNavigationBar, который позволяет мне создавать стек внутри каждого элемента. Это позволяет мне вернуться к исходной странице в стеке. Но после перехода на другую страницу appBar дублируется. Если я удалю исходный appBar, я останусь без appBar на целевой странице. Если я удалю пункт назначения appBar, я потеряю стрелку, чтобы вернуться назад.

Так что я думаю, что мне следует попробовать;

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

Являются одним из этих подходит толковое? Если да, то как лучше всего это сделать? Или мне следует использовать совершенно другой подход? Есть ли способ иметь как постоянные BottomnavigationBar, так и appBar?

Вот основной код, содержащий вложенные BottomNavigationBar; 

class TabsScreen extends StatefulWidget {
  @override
  _TabsScreenState createState() => _TabsScreenState();
}

class _TabsScreenState extends State<TabsScreen> {
  int _currentIndex = 0;
  final _home = GlobalKey<NavigatorState>();
  final _messages = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
      //some stuff
       ),
      body: IndexedStack(
        index: _currentIndex,
        children: <Widget>[
          Navigator(
            key: _home,
            onGenerateRoute: (route) => MaterialPageRoute(
              settings: route,
              builder: (context) => MainPage(),
            ),
          ),
          Navigator(
            key: _messages,
            onGenerateRoute: (route) => MaterialPageRoute(
              settings: route,
              builder: (context) => Messages(),
            ),
          ),     
          ),     
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: (val) => _onTap(val, context),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text('Messages'),
          ),          
        ],
      ),
    );
  }

  void _onTap(int val, BuildContext context) {
    if (_currentIndex == val) {
      switch (val) {
        case 0:
          _home.currentState.popUntil((route) => route.isFirst);
          break;
        case 1:
          _messages.currentState.popUntil((route) => route.isFirst);
          break;        
        default:
      }
    } else {
      if (mounted) {
        setState(() {
          _currentIndex = val;
        });
      }
    }
  }
}

Вот код, который подталкивает к страница назначения; 

  onSwipeUp: () {
              Navigator.push(
              context,
              PageTransition(
                type: PageTransitionType.downToUp,
                child: HomeReply(),
              )
          );
        },

А вот код назначения: 

class HomeReply extends StatefulWidget {
  @override
  _HomeReplyState createState() => new _HomeReplyState();
}

class _HomeReplyState extends State<HomeReply> {

  @override
  void initState(){}

  @override
  Widget build(BuildContext context) {
    return
           Scaffold(
                appBar: AppBar(
                    title: Text(
                      "Back to " + "'" + originalTitle + "'",
                    ),
                  ),
                body: ReplyStage(),          
       );
  }
}

1 Ответ

0 голосов
/ 07 августа 2020

В итоге я использовал совершенно другой подход, используя плагин Flutters Nested Navigators;

https://github.com/n0vah/nested_navigators

...