Flutter - 导航到新的屏幕并返回

Question

15 浏览2023年1月27日

匿名的 2023年1月27日

0 Comments

有人可以帮我解决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{

@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: [

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!'),

),

);

}

谢谢！

0

3 答案

匿名的 · Answer 1 · 2023-04-10T08:40:22+00:00

Flutter - 导航到新屏幕并返回

在上述代码中，有一个问题导致导航到第二个屏幕后无法返回。原因是在MyApp类的build方法中，将Scaffold的body属性设置为FirstRoute()。而在FirstRoute类中，通过一个RaisedButton来触发导航到第二个屏幕的操作，但没有提供返回上一个屏幕的方法。

解决这个问题的方法是在导航到第二个屏幕时，为RaisedButton添加一个onPressed事件，通过Navigator.pop(context)来返回上一个屏幕。修改后的代码如下：

import 'package:flutter/material.dart';


void main() => runApp(MyApp());
class MyApp extends StatefulWidget{
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State{
  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 {
  Widget build(BuildContext context) {
    return Center(
      child: Wrap(
        children: [
          RaisedButton(
            child: Text('View 2'),
            onPressed: (){
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondRoute()),
              );
            },
          )
        ],
      ),
    );
  }
}
class SecondRoute extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

通过在SecondRoute类中的RaisedButton的onPressed事件中添加Navigator.pop(context)，就可以实现从第二个屏幕返回到第一个屏幕。

参考链接：[github.com/flutter/flutter/issues/15919](https://github.com/flutter/flutter/issues/15919)

匿名的 · Answer 2 · 2023-07-25T15:33:57+00:00

在这个问题中，出现的原因是在Flutter中导航到新页面并返回的过程中，如果将页面的内容直接放在MaterialApp中，那么它将无法访问MaterialApp的上下文，也无法使用导航器（Navigator）。

为了解决这个问题，有两个选项：

1. 将Scaffold放在自己的无状态（stateless）小部件中。

2. 或者将Scaffold包装在一个Builder小部件中，以便可以使用MaterialApp的上下文。

下面是一个示例代码，展示了如何使用第二种解决方法：


class _MyAppState extends State{
  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: [
              RaisedButton(
                child: Text('View 2'),
                onPressed: (){
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondRoute()),
                  );
                },
              )
            ],
          ),
        ),
      )})
    );
  }
}

更多信息，请参考这个回答。

匿名的 · Answer 3 · 2023-03-01T15:22:36+00:00

在Flutter中，当我们想要导航到一个新的屏幕并返回时，有时会遇到问题。这篇文章将讨论这个问题的出现原因以及解决方法。

问题的原因在于，在某些情况下，我们可能无法直接访问Navigator。这可能会导致导航操作无法正常执行，从而导致问题的出现。

解决这个问题的方法是将需要访问Navigator的小部件包装在一个Builder中，或者将该子树提取到一个类中。然后，我们可以使用新的BuildContext来访问Navigator，并执行导航操作。

以下是一个示例代码，展示了如何解决这个问题：


import 'package:flutter/material.dart';
class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Next Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NextScreen()),
            );
          },
        ),
      ),
    );
  }
}
class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: MyScreen(),
  ));
}

在上面的代码中，我们在MyScreen小部件中使用了一个Builder来包装RaisedButton。这样，我们就可以使用BuildContext来访问Navigator，并在按钮按下时导航到下一个屏幕。在NextScreen小部件中，我们可以使用相同的BuildContext来导航回上一个屏幕。

通过将需要访问Navigator的小部件包装在Builder中，或者将其提取到一个类中，并使用BuildContext来访问Navigator，我们可以解决在Flutter中导航到新屏幕并返回时可能遇到的问题。