如何从一个屏幕跳转到另一个屏幕，并清除堆栈中的所有先前屏幕？

Question

12 浏览2023年6月10日

匿名的 2023年6月10日

0 Comments

在我的Flutter项目中，我有三个屏幕 - Screen0、Screen1和Screen2。现在，从screen0，我可以通过按钮点击转到screen1，然后从screen1，我们可以通过按钮转到screen2。在screen2中，我有一个按钮，我用它来返回到screen0。由于Screen0是初始屏幕，当我回到Screen0时，我希望清除所有先前的屏幕，并且不想有任何返回选项，就像在此图像中所示- [图片链接](https://i.stack.imgur.com/dEjtm.png)。

以下是我的代码：

main.dart

import 'package:flutter/material.dart';


import 'screen0.dart';
import 'screen1.dart';
import 'screen2.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context)=> Screen0(),
        '/first': (context)=> Screen1(),
        '/second': (context)=> Screen2(),
      },
    );
  }
}

我在main.dart文件中设置了所有的路由。然后在Screen0中，我有一个按钮来转到screen1，代码如下：

screen0.dart

import 'package:flutter/material.dart';


class Screen0 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        title: Text('Screen 0'),
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              color: Colors.red,
              child: Text('Go to screen 1'),
              onPressed: (){
                Navigator.pushNamed(context, '/first');
              },
            ),
          ],
        ),
      ),
    );
  }
}

在screen1中，我有一个按钮去到screen2：

class Screen1 extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        title: Text('Screen 1'),
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              color: Colors.red,
              child: Text('Go to screen 2'),
              onPressed: (){
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) {
                    return Screen2();
                  })
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

现在，在screen2中，我有一个按钮去到screen0：

class Screen2 extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        title: Text('Screen 2'),
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              color: Colors.red,
              child: Text('Go to screen 0'),
              onPressed: (){
                Navigator.popUntil(context, ModalRoute.withName('/'));
              },
            ),
          ],
        ),
      ),
    );
  }
}

我尝试了一些解决方案，比如使用下面链接中提供的Navigator.pushAndRemoveUntil：

[Flutter - Navigate to a new screen, and clear all the previous screens](https://stackoverflow.com/questions/52689049/flutter-navigate-to-a-new-screen-and-clear-all-the-previous-screens)

但是这个解决方案对我没起作用。所以，如果有人可以帮我解决这个问题，那就太好了。

0

1 答案

匿名的 · Answer 1 · 2023-08-12T11:29:47+00:00

原因：在移动应用程序开发中，经常会遇到从一个屏幕跳转到另一个屏幕的需求。然而，有些时候我们希望在跳转到新屏幕时清除之前所有的屏幕，以确保用户无法返回到之前的屏幕。在默认情况下，Flutter的导航器（Navigator）会将屏幕添加到一个堆栈中，用户可以通过点击返回按钮返回到之前的屏幕。因此，我们需要找到一种方法来在切换屏幕时清除之前的所有屏幕。

解决方法：Flutter提供了一个名为pushNamedAndRemoveUntil的方法，可以在跳转到新屏幕时清除之前的所有屏幕。该方法接受两个参数，第一个参数是要跳转到的新屏幕的路径，第二个参数是一个回调函数，用于确定是否应该清除之前的所有屏幕。

例如，我们可以使用以下代码来实现清除之前所有屏幕的效果：

Navigator.of(context).pushNamedAndRemoveUntil('/screen4', (Route<dynamic> route) => false);

在上面的代码中，我们将路径设置为'/screen4'，这是我们要跳转到的新屏幕的路径。回调函数的参数是当前的路由（route），我们通过返回false来告诉导航器不要清除任何之前的屏幕。

使用pushNamedAndRemoveUntil方法，我们可以轻松地清除之前的所有屏幕，实现从一个屏幕到另一个屏幕的无缝切换。