dart - Flutter Navigator.pop(context) 返回黑屏

Question

我的 Flutter Project 结构是这样的

Main() //Run App with MaterialApp and Routes
L HomePage() //Default route (/), with BottomNavigation
  L MoviesPage() //Default BottomNavigation Index and shows a list of movies form TMDB 
    L DetailsPage()
  L SeriesPage()
  L SupportPage()

点击任何电影后，它会向前导航到 DetailsPage()，但是当我从 DetailsPage() 调用 Navigator.pop 时，它应该返回上一个屏幕，但它没有。

Navigator.canPop(context) return false 但是硬件后退按钮工作得很好，那我该如何解决呢？

ma​​in.dart

class BerryMain extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Inferno(
        {
          '/': (context, argumets) => HomePage(),
          '/detailspage': (context, arguments) => DetailsPage(arguments),
        },
      ).home(context),
    );
  }
}

主页

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final List<Widget> _childnav = [MoviesPage(), SeriesPage(), SupportPage()];

  void onTabPressed(...)

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('...'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),
      body: _childnav[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabPressed,
        currentIndex: _currentIndex, //this property defines current active tab
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.movie), title: Text('Movies')),
          BottomNavigationBarItem(icon: Icon(Icons.tv), title: Text('Series')),
          BottomNavigationBarItem(icon: Icon(Icons.help), title: Text('Help'))
        ],
      ),
    );
  }
}

电影页面

//Inside ListView Builder
Virgil.pushNamed(context, '/detailspage', arguments: args);

详情页面

//Inside MaterialApp > Scaffold > SliverAppbar > BackButton
Navigator.pop(context)

我正在使用 Virgil但我认为这不是问题。

Answer 1

如果您的 MoviesPage 有另一个 MaterialApp 小部件，就会发生这种情况。大多数情况下，您希望将 Scaffold 用作新页面/屏幕的顶部小部件，但如果您不小心使用了 MaterialApp，则不会发出任何警告。

发生的情况是，MaterialApp 创建了一个新的 Navigator，所以如果您从一个带有 MaterialApp 的页面切换到另一个页面，您现在有了小部件树中的两个导航器。

调用 Navigator.of(context) 会查找 最近的 Navigator，因此它会使用在您的 MoviesPage 中新创建的导航器>。由于您的路线转换历史存储在第一个导航器中，因此该导航器无法弹回 - 它的路线历史为空。

因此，黑屏。

长话短说，要解决这个问题，只需在所有嵌套屏幕中使用 Scaffold 作为顶部小部件，而不是 MaterialApp。