Removing navigated pages from stack in .NET MAUI app.

huangapple go评论53阅读模式
英文:

Removing navigated pages from stack in .NET MAUI app

问题

I'm using AppShell in my .NET MAUI app and here's the scenario:

我在我的.NET MAUI应用程序中使用AppShell,以下是情况:

I have Page1, Page2 and Page3 defined as my main tab in AppShell -- see below:

我将Page1Page2Page3定义为AppShell中的主选项卡,如下所示:

<FlyoutItem Title="Home" Icon="home.png">
   <Tab Title="Page 1" Icon="icon1.png">
      <ShellContent Route="Page1" ContentTemplate="{DataTemplate local: Page1}" />
   </Tab>
   <Tab Title="Page 2" Icon="icon2.png">
      <ShellContent Route="Page2" ContentTemplate="{DataTemplate local: Page2}" />
   </Tab>
   <Tab Title="Page 3" Icon="icon3.png">
      <ShellContent Route="Page3" ContentTemplate="{DataTemplate local: Page3}" />
   </Tab>
</FlyoutItem>

I tap on tab 3 and go to Page3. I then navigate to Page4 and from there to Page5 to fill out a form. I navigate to pages 4 and 5 by clicking page elements such as buttons, etc. The routes for Page4 and Page5 are defined in AppShell.xaml.cs -- see below:

我点击选项卡3,进入Page3。然后我导航到Page4,然后再到Page5以填写表单。我通过点击页面元素如按钮等导航到页面4和5。Page4Page5的路由在AppShell.xaml.cs中定义,如下所示:

...
Routing.RegisterRoute(nameof(Page4), typeof(Page4));
Routing.RegisterRoute(nameof(Page5), typeof(Page5));

After filling out the form, I want to send the user to Page2 but also remove Page4 and Page5 from the stack.

填写表单后,我想将用户发送到Page2,但同时从堆栈中删除Page4Page5

I tried the following but it's not working exactly right:

我尝试了以下方法,但效果不是完全正确:

var route = $"../../{nameof(Page2)}";
await Shell.Current.GoToAsync(route);

This does send the user to Page2 after I submit the form but doesn't seem to remove Page4 and Page5 from the stack. So, if I tap on Page3 on the tab bar, I still end up on Page5 instead of Page3. That's because originally, I got to Page5 through this path:

这确实在我提交表单后将用户发送到Page2,但似乎没有从堆栈中删除Page4Page5。因此,如果我在选项卡栏上点击Page3,我仍然会进入Page5而不是Page3。这是因为最初,我通过以下路径进入了Page5

Page3 => Page4 => Page5.

How do I make sure I remove Page4 and Page5 from the navigation stack?

如何确保我从导航堆栈中删除Page4Page5

英文:

I'm using AppShell in my .NET MAUI app and here's the scenario:

I have Page1, Page2 and Page3 defined as my main tab in AppShell -- see below:

&lt;FlyoutItem Title=&quot;Home&quot; Icon=&quot;home.png&quot;&gt;
   &lt;Tab Title=&quot;Page 1&quot; Icon=&quot;icon1.png&quot;&gt;
      &lt;ShellContent Route=&quot;Page1&quot; ContentTemplate=&quot;{DataTemplate local: Page1}&quot; /&gt;
   &lt;/Tab&gt;
   &lt;Tab Title=&quot;Page 2&quot; Icon=&quot;icon2.png&quot;&gt;
      &lt;ShellContent Route=&quot;Page2&quot; ContentTemplate=&quot;{DataTemplate local: Page2}&quot; /&gt;
   &lt;/Tab&gt;
   &lt;Tab Title=&quot;Page 3&quot; Icon=&quot;icon3.png&quot;&gt;
      &lt;ShellContent Route=&quot;Page3&quot; ContentTemplate=&quot;{DataTemplate local: Page3}&quot; /&gt;
   &lt;/Tab&gt;
&lt;/FlyoutItem&gt;

I tap on tab 3 and go to Page3. I then navigate to Page4 and from there to Page5 to fill out a form. I navigate to pages 4 and 5 by clicking page elements such as buttons, etc. The routes for Page4 and Page5 are defined in AppShell.xaml.cs -- see below:

...
Routing.RegisterRoute(nameof(Page4), typeof(Page4));
Routing.RegisterRoute(nameof(Page5), typeof(Page5));

After filling out the form, I want to send the user to Page2 but also remove Page4 and Page5 from the stack.

I tried the following but it's not working exactly right:

var route = $&quot;//../../{nameof(Page2)}&quot;;
await Shell.Current.GotoAsync(route);

This does send the user to Page2 after I submit the form but doesn't seem to remove Page4 and Page5 from the stack. So, if I tap on Page3 on the tab bar, I still end up on Page5 instead of Page3. That's because originally, I got to Page5 through this path:

Page3 =&gt; Page4 =&gt; Page5.

How do I make sure I remove Page4 and Page5 from the navigation stack?

答案1

得分: 2

我可以复现这个问题。这似乎是 maui 的一个新问题。根据关于 Maui Shell 中的后退导航 的官方文档,

> await Shell.Current.GoToAsync(&quot;../../route&quot;); 在这个例子中,会执行两次后退导航,然后导航到指定的路由。

但是它并没有按预期工作。所以你可以在 GitHub 上发布一个新的问题,并使用以下代码在导航之前从导航堆栈中移除页面。

var stack = Shell.Current.Navigation.NavigationStack.ToArray();
for(int i = stack.Length - 1; i > 0; i--)
{
   Shell.Current.Navigation.RemovePage(stack[i]);
}
Shell.Current.GoToAsync(&quot;//Page2&quot;);
英文:

I can reproduce the problem. It seems a new issue for the maui. According to the official document about the Backwards navigation in the Maui Shell,

> await Shell.Current.GoToAsync(&quot;../../route&quot;); In this example,
> backwards navigation is performed twice, and then navigation to the
> specified route.

But it didn't work expectedly. So you can post a new issue on the github and use the following code to remove the page in the navigation stack before you navigate.

var stack = Shell.Current.Navigation.NavigationStack.ToArray();
for(int i = stack.Length - 1; i &gt; 0; i--)
{
   Shell.Current.Navigation.RemovePage(stack[i]);
}
Shell.Current.GoToAsync(&quot;//Page2&quot;);

答案2

得分: 2

你想要清除堆栈,然后位于Page2页面。

根据文档,这很简单:

await Shell.Current.GotoAsync($&quot;//{nameof(Page2)}&quot;);

maui shell导航:
> "//route" ... 匹配的页面将替换导航堆栈。

英文:

You want the stack to be cleared, and then be on Page2.

According to the doc, this is as simple as:

await Shell.Current.GotoAsync($&quot;//{nameof(Page2)}&quot;);

maui shell navigation:
> "//route" ... The matching page will REPLACE the navigation stack.

huangapple
  • 本文由 发表于 2023年5月18日 12:50:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/76277821.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定