Flutter Navigator.pop(context) 返回黑屏 [英] Flutter Navigator.pop(context) returning a black screen

问题描述

我的 Flutter 项目结构是这样的

My Flutter Project structure is like this

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 时，它应该返回到上一个屏幕，但它没有.

After clicking on any movie it navigates forward to the DetailsPage() but when I call Navigator.pop from DetailsPage() it should go back to the previous screen but it doesn't.

Navigator.canPop(context) 返回 false 但硬件后退按钮工作得很好，那么我该如何解决?

The Navigator.canPop(context) return false But the hardware back button works absolutely fine, so how do I fix it?

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，但我认为这不是问题所在.

I'm using Virgil but I don't think it is the problem.

推荐答案

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

This can happen if your MoviesPage has another MaterialApp widget. Most of the time you want to use Scaffold as a top widget for a new page/screen, but if you accidentally use MaterialApp instead, nothing warns you.

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

What happens, is that MaterialApp creates a new Navigator, so if you switch from one page with MaterialApp to another, you now have two Navigators in the widget tree.

调用 Navigator.of(context) 查找 最近的 导航器，因此它将使用在您的 MoviesPage.由于您的路线转换历史记录存储在第一个导航器中，因此无法弹出 - 它的路线历史记录为空.

The call Navigator.of(context) looks for the closest Navigator, so it'll use the one, newly created in your MoviesPage. As the history of your route transitions is stored in a first Navigator, this one can't pop back – it has empty route history.

因此，黑屏.

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

Long story short, to fix this, just use Scaffold as a top widget instead of MaterialApp in all nested screens.

这篇关于Flutter Navigator.pop(context) 返回黑屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！