.NET MAUI - 拆分视图 AppShell / 静态地图布局

Question

我正在 .NET MAUI 中构建一个应用程序，该应用程序当前使用 AppShell 进行导航，并且在与锁定为纵向模式的手机或平板电脑一起使用时运行良好。有一项新要求将允许用户在平板电脑上以横向模式使用相同的应用程序，然后呈现分屏视图。左侧是应用程序，其运行方式与当前使用 AppShell 的运行方式完全相同，右侧是静态地图控件。用户应该能够正常浏览左侧的应用程序，而右侧保持不变。有没有办法既能实现这一目标，又能利用 AppShell 导航？或者我是否需要切换到导航页面？或者这可能吗？

我尝试创建一个特定于平板电脑的 AppShell 文件，如果设备属于平板电脑习惯，则该文件会加载。它定义了一个单独的 ShellContent，其中定义了分屏。我重写了 AppShell 代码隐藏中的导航，以将页面内容本质上移植到 ShellContent 中定义的 ContentView 中，这种方法可以工作，但是我失去了 AppShell 向后导航的好处。我走在正确的轨道上吗？还有其他可能适用于 AppShell 的建议吗？或者也许使用导航页面或其他东西重新考虑它？我知道 MAUI 中的 TwoPaneView，但我不确定这是否会帮助我实现我的目标。

预先感谢您提出的任何建议。

Answer 1

您可以参考以下解决方案：

下载 TwoPaneView 的官方代码示例。在此基础上，将 NewPage1 和 NewPage2 添加到根目录，以及 MainPageViewModel 中的 ViewModels 文件夹：

将此添加到 MainPage.xaml：

                   .....
                    <Button Text="Reset TwoPaneView" Clicked="OnReset"
                        HorizontalOptions="Center"/>

                    //Add a btn 
                    <Button Text="Back" Command="{Binding BackCommand}"/>
 
                </VerticalStackLayout>
           </ScrollView>
       </foldable:TwoPaneView.Pane2>
     </foldable:TwoPaneView>
</ContentPage>

隐藏代码：

public MainPage()
{
     InitializeComponent();
 
     BindingContext = new MainPageViewModel();
     ......

MainPageViewModel：

public class MainPageViewModel
{
    public Command BackCommand { get; }
 
    public MainPageViewModel() { BackCommand = new Command(OnBackClicked); }
 
    private async void OnBackClicked(object obj)
    {
        await Shell.Current.GoToAsync($"//{nameof(NewPage1)}");
    }
}

NewPage1.xaml：

<ContentPage ....>
   <VerticalStackLayout>
       <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

       <Button Text="GoToTwoTwoPaneView" Clicked="Button_Clicked"/>
   </VerticalStackLayout>
</ContentPage>

NewPage1.xaml.cs：

private void Button_Clicked(object sender, EventArgs e)
{
    Shell.Current.GoToAsync($"//{nameof(MainPage)}");
}

应用程序外壳：

<Shell ....>
   <!--<ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />-->
   <ShellContent Title="MainPage" Route="MainPage" ContentTemplate="{DataTemplate local:MainPage}" Shell.TabBarIsVisible="False"/>
   <FlyoutItem >
       <ShellContent Title="NewPage1" Route="NewPage1" ContentTemplate="{DataTemplate local:NewPage1}" />
       <ShellContent Title="NewPage2" Route="NewPage2" ContentTemplate="{DataTemplate local:NewPage2}" />
   </FlyoutItem>
</Shell>

这样，您就可以保留 AppShell 的后退导航优势。