flutter - 浏览 MaterialPageRoute

Question

我有4个屏幕。 X，A，B，C。导航模式应如下所示

这是代码
X 屏幕

class X extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: FlatButton(
        child: Text('Navigate to A'),
        onPressed: () {
          A.show(context);
        },
      ),
    );
  }
}

一 block 屏幕

class A extends StatelessWidget {
  static Future<void> show(BuildContext context) async {
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => A(), fullscreenDialog: false),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: FlatButton(
          child: Text('Navigate to B'),
          onPressed: () {
            B.show(context);
          },
        ),
      ),
    );
  }
}

B级

class B extends StatelessWidget {
  static Future<void> show(BuildContext context) async {
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => B(), fullscreenDialog: false),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: FlatButton(
          child: Text('Navigate to C'),
          onPressed: () {
            C.show(context);
          },
        ),
      ),
    );
  }
}

C级

class C extends StatelessWidget {
  static Future<void> show(BuildContext context) async {
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => C(), fullscreenDialog: false),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: FlatButton(
          child: Text('Navigate back to A'),
          onPressed: () {
            A.show(context); //<=== here is problem
          },
        ),
      ),
    );
  }
}

我遇到的问题是，当我从屏幕 C 导航回屏幕 A 并按下应用栏上的后退按钮然后它让我回到屏幕 C。我需要能够从 C 导航回 B，B 到 A，并且A 到 X，但是一旦我从 C 导航到 A，我需要在按下按钮时导航回 X 或再次导航到 B
更新
我想我有点用尝试失败的技术来做到这一点，老实说，我不明白为什么它可以按我的意愿工作。如果您知道为什么会这样并有解释，请提供答案。这是我所做的
我在屏幕 A 中添加了新的静态函数

  static Future<void> back(BuildContext context) async {
    await Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(
            builder: (context) => A(),
            fullscreenDialog: false),
        ModalRoute.withName('/'));
  }

并在我的按钮中的屏幕 C 中调用它

A.back(context)

Answer 1

更改您的代码

给 A 页面路径命名

在 C 页面上执行 popUntil 按钮

class A extends StatelessWidget {
  static Future<void> show(BuildContext context) async {
    await Navigator.of(context).push(
      MaterialPageRoute(
          builder: (context) => A(),
          settings: RouteSettings(name: 'A'), // <-- change 1 give a name
          fullscreenDialog: false),
    );
  }
...

class C extends StatelessWidget {
...  
  onPressed: () {
    Navigator.popUntil(context, (route) => route.settings.name == 'A'); //<=== will pop until A change 2
...

see it works in dartpad
working gist used in dartpad
您的更新中发生了什么 A.back ?

它正在插入新 带有页面 A 的路由(旧的将被销毁)

并删除所有路线直到第一条路线现在它 X

但是如果在 X 之前有更多的路线也会删除它们

缺点 - 在 iOS 上 swipe back行为调用 Navigator.pop并且没有直接的方法可以调用您的 A.back在这种情况下

  static Future<void> back(BuildContext context) async {
    await Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(
            builder: (context) => A(),
            fullscreenDialog: false),
        ModalRoute.withName('/'));
  }