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()),
                  );
                },
              )
            ],
          ),
        ),
      )})
    );
  }
}

此答案中的更多信息