使用不包含导航器的上下文请求的导航器操作。 （生成器函数不会显示 MainPage()）

Question

我一按下按钮就收到错误代码 "Navigator operation requested with a context that does not include a Navigator." 我用来导航的代码在 RegisterPage 中，构建器函数应该显示 MainPage。

void main() => runApp(RegisterPage());

class RegisterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(
        title: Text('Register Your Account'),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.of(context)
                .push(
              MaterialPageRoute(
                  builder: (context) => MainPage()
              ),
            );
          },
          child: Text('Sign in as guest'),
        )),
      )
    );
  }
}

  class MainPage extends StatefulWidget{
  String get title => "Cykla i stockholm";

  MapPage createState()=> MapPage();
  }

Answer 1

这是因为使用导航器的小部件(RegisterPage)在小部件树中与创建导航器的小部件(MaterialApp)处于同一级别

解决方案： 使 RegisterPage 低于 MaterialApp 以便能够使用其 context:

class RegisterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Register Your Account'),
            centerTitle: true,
            backgroundColor: Colors.green,
          ),
          body: Builder(
            builder: (ctx)=> Center(//this context here has access to Navigator
                child: RaisedButton(
                  onPressed: () {
                    Navigator.of(ctx)
                        .push(
                      MaterialPageRoute(
                          builder: (context) => MainPage()
                      ),
                    );
                  },
                  child: Text('Sign in as guest'),
                )),
          ),
        )
    );
  }
}