Question

我想根据自己的需要更改this project。

主要目标是：

使用嵌套导航器和根导航器从根页面转到新页面（这样我就可以隐藏或显示BottomNavigationBar）
更改选项卡，然后从根目录或嵌套页面转到嵌套页面。
此外，我不想在Offstage中使用Stack和app.dart，因为即使用户不使用它们，我也不想建立我的页面。 / li>

更改的文件：

app.dart：

class App extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => AppState();
}

class AppState extends State<App> {
  TabItem _currentTab = TabItem.first;
  GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  void _selectTab(TabItem tabItem, {String pushReplacement, String push}) {
    if (tabItem == _currentTab) {
      // pop to first route
      _navigatorKey.currentState.popUntil((route) => route.isFirst);
    } else {
      setState(() => _currentTab = tabItem);
    }
  }

  _tabPush(TabItem tabItem, String path){
    _selectTab(tabItem);
    _navigatorKey.currentState.pushNamed(path);
  }


  _rootPush(String path){
    Navigator.pushNamed( //root navigator
        context, path
    );
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        final isFirstRouteInCurrentTab =
        !await _navigatorKey.currentState.maybePop();
        if (isFirstRouteInCurrentTab) {
          // if not on the 'main' tab
          if (_currentTab != TabItem.first) {
            // select 'main' tab
            _selectTab(TabItem.first);
            // back button handled by app
            return false;
          }
        }
        // let system handle back button if we're on the first route
        return isFirstRouteInCurrentTab;
      },
      child: Scaffold(
        body: RootNavigatorProxy(
          tabPush: _tabPush,
          navigateNamed: _rootPush,
          child: body(_currentTab),
        ),
        bottomNavigationBar: BottomNavigation(
          currentTab: _currentTab,
          onSelectTab: _selectTab,
        ),
      ),
    );
  }

  Widget body(TabItem tabItem){

   return Navigator( //nested navigator
      key: _navigatorKey,
      initialRoute: tabRoute[tabItem],
      onGenerateRoute: RouteGenerator.generateRoute,
    );

  }

}

root_navigator_proxy.dart：

class RootNavigatorProxy extends InheritedWidget{
  final Function navigateNamed;
  final Function tabPush;

  RootNavigatorProxy({
    Key key,
    @required Widget child,
    @required this.navigateNamed,
    @required this.tabPush

  }) :  assert(child != null),
        super(key: key, child: child);


  static RootNavigatorProxy pushNamed(BuildContext context, String path) {
    return context.dependOnInheritedWidgetOfExactType<RootNavigatorProxy>().navigateNamed(path);
  }

  static RootNavigatorProxy changeTabPush(BuildContext context, TabItem tabItem, String path) {
    return context.dependOnInheritedWidgetOfExactType<RootNavigatorProxy>().tabPush(tabItem, path);
  }

  @override
  bool updateShouldNotify(RootNavigatorProxy old) {
    return (navigateNamed != old.navigateNamed
        || tabPush != old.tabPush);
  }
}

first_page.dart（根页）：

class FirstPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('First page')
        ),
        body:
        Center(
          child: Column(
            children: <Widget>[
              RaisedButton(
                child: Text('To nested'),
                onPressed: () =>  Navigator.pushNamed(context, 'second')
              ),
              RaisedButton(
                child: Text('To root'),
                onPressed: () =>  RootNavigatorProxy.pushNamed(context, 'second')
              ),
              RaisedButton(
                  child: Text('Change tab and push'),
                  onPressed: () =>  RootNavigatorProxy.changeTabPush(context, TabItem.second, '/nested')
              )
            ],
          ),
        )
    );
  }
}

但是不幸的是，这不起作用。当我单击底部菜单中的项目时，页面不会更改。我了解这是因为我使用相同的_navigatorKey，所以Navigator不想查看已更改的新initialRoute。

因此，我尝试了一种肮脏的黑客行为，并在_navigatorKey = GlobalKey<NavigatorState>()中使用了_selectTab，但是现在我无法使用Change tab and push按钮，因为_navigatorKey重置为新的{ {1}}没有状态（NavigatorState等于_navigatorKey.currentState中的null），因此现在更改制表符有效，但在此之后推送-不起作用。我还尝试了更多选项来实现必要的行为，但是没有任何效果。

那么，我怎样才能实现我所说的目标所必需的行为？

嵌套的导航器和页面导航出现问题

0 个答案: