在 Flutter 中使用 Navigator.push() 时出现黑屏

Posted 2023-02-23

【中文标题】在 Flutter 中使用 Navigator.push() 时出现黑屏

【英文标题】：Black screen when using Navigator.push() in Flutter

【发布时间】：2020-07-23 04:25:47

【问题描述】：

我正在尝试使用 Navigator.push 导航到 Flutter 中的新页面。这是我到目前为止所得到的：

GestureDetector(
            onTap: () 
              print('Test');
//              Navigator.push(context,
//                  MaterialPageRoute(builder: (context) => ResultsPage()));
            ,
            child: Container(
              color: Color(0xFFff474b),
              child: Center(
                child: Text('CALCULATE', style: kButtonText),
              ),
              padding: EdgeInsets.only(bottom: 20.0),
              width: double.infinity,
              height: 80.0,
              margin: EdgeInsets.only(top: 10.0),
            ),
          ),

我想实现的代码被注释掉了，因为我一直在用 print 语句测试 onTap。

有趣的是，打印语句运行，但由于某种原因，我无法让 Navigator.push 工作。它只会导航到黑屏。

就上下文而言，这是结果页面 - 只是一个带有 App Bar 的简单脚手架。但是应用栏没有显示在下一页：

class ResultsPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Calculated Distance'),
      ),
    );
  

【参考方案1】：

该错误可能是由于脚手架中存在两个或多个浮动操作按钮造成的。默认情况下，浮动动作按钮有一个 Hero 属性处于活动状态。通过 heroTag: null, 使其停用。

例如，

FloatingActionButton(
                    heroTag: null,
                    child: Icon(),
                    onPressed: () ,
                  ),

【参考方案2】：

啊，事实证明问题是我在页面上有两个 FloatingActionButton，因此它与 Navigator 路由混淆了。

我发现的这篇 Medium 文章是解决方案的一个很好的指南：https://medium.com/@kaendagger/test-cef30fcb5c54

【参考方案3】：

将 ResultsPage() 添加到您的路线中将其添加到您的 MaterialApp(

MaterialApp( 
  initialRoute: '/',
              routes: 
                '/': (_) => HOME(),
                '/home': (_) => ResultsPage(),
              , )