Flutter-导航到新屏幕并返回

Question

有人可以帮我动一下Flutter吗？

我正在尝试（导航到新屏幕并返回。）

请按照此处的指南进行操作：

https://flutter.dev/docs/cookbook/navigation/navigation-basics

但是我在这里得到这个错误：

引发了另一个异常：请求了不包含导航器的上下文的导航器操作。

这是我的简单Flutter代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget{
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp>{

  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: 'Welcome',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to view by view'),
        ),
        body: Center(
          child: Wrap(
            children: <Widget>[
              RaisedButton(
                child: Text('View 2'),
                onPressed: (){
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondRoute()),
                  );
                },
              )
            ],
          ),
        ),
      )
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

谢谢！

Answer 1

将需要访问Navigator的小部件包装到Builder中或将该子树提取到类中。 并使用新的BuildContext访问Navigator。

Answer 2

奇怪的是，文档会推荐一种破损的方法！ 只需将MaterialApp的主体提取到其自己的Widget中，它将起作用。 这是代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget{
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp>{

  @override
  Widget build(BuildContext context){
    return new MaterialApp(
        title: 'Welcome',
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: Text('Welcome to view by view'),
          ),
          body: FirstRoute(),
        )
    );
  }
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Wrap(
        children: <Widget>[
          RaisedButton(
            child: Text('View 2'),
            onPressed: (){
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondRoute()),
              );
            },
          )
        ],
      ),
    );
  }
}


class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Answer 3

是的，在下面的例子中MaterialApp是

 runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));

在示例FirstRoute中，它与MaterialApp分开。 这样做是因为如果我们将FirstRoute的内容直接放在MaterialApp内，则它将没有MaterialApp的上下文，并且无法访问Navigator。

您有2个选择。

将支架放置在它自己的无状态Widget中。

或将脚手架包装在构建器小部件中以使MaterialApp上下文可用

class _MyAppState extends State<MyApp>{

  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: 'Welcome',
      debugShowCheckedModeBanner: false,
      home: Builder(builder: (BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Welcome to view by view'),
        ),
        body: Center(
          child: Wrap(
            children: <Widget>[
              RaisedButton(
                child: Text('View 2'),
                onPressed: (){
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondRoute()),
                  );
                },
              )
            ],
          ),
        ),
      )})
    );
  }
}

此答案中的更多信息