MAUI：Shell 內容導航無法導航到正確視圖

Question

最近我開始將基於 Xamarin 框架的應用程序遷移到 MAUI 框架。 我遇到了一個問題，當我按下彈出窗口中的內容時，我的Appshell沒有導航到正確的頁面，但它顯示了在內容頁面上導航的最后一頁。

我在 Xamarin 上使用了相同的代碼，我沒有遇到這個問題。 下面我還附上了一個gif和代碼。 當應用程序在app.xaml.cs中啟動時，我有一個邏輯，如果檢查自動autologin或登錄成功，它將Mainpage設置為Appshell ，否則主頁將設置為登錄頁面。

AppShell.xaml

     <Shell  x:Class="SnyderMobile.AppShell"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:pages="clr-namespace:SnyderMobile.Views"
            xmlns:controls="clr-namespace:SnyderMobile.Controls"
            Shell.FlyoutBehavior="Flyout"
            BackgroundColor="#FAFAFA"
            Shell.ForegroundColor="#5E5D5D"
            Shell.TitleColor="#5E5D5D">
    
        <Shell.FlyoutBackdrop>
            <LinearGradientBrush 
                StartPoint="0,0"
                EndPoint="1,1">
                <GradientStop 
                    Color="White"
                    Offset="0.1"/>
                <GradientStop 
                    Color="#E786A8"
                    Offset="0.6"/>
                <GradientStop 
                    Color="#BC1538"
                    Offset="1.0" />
            </LinearGradientBrush>
        </Shell.FlyoutBackdrop>
    
        <Shell.FlyoutHeader>
            <Grid 
                BackgroundColor="Black">
                <Image 
                    Aspect="AspectFill" 
                    Source="background_shell.png" 
                    Opacity="0.6" />
                <StackLayout 
                    Orientation="Horizontal" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center">
                    <Frame 
                        HeightRequest="80" 
                        WidthRequest="80" 
                        CornerRadius="50" 
                        VerticalOptions="Center" 
                        HorizontalOptions="Center">
                        <Label 
                            Text="{Binding FirstLetter}" 
                            FontAttributes="Bold" 
                            FontSize="Large" 
                            TextColor="#BC1538" 
                            VerticalOptions="Center" 
                            HorizontalOptions="Center" 
                            Padding="0" 
                            Margin="0"/>
                    </Frame>
                    <StackLayout
                        Margin="0, 0, 0, 0"
                        VerticalOptions="Center" 
                        HorizontalOptions="Center"
                        Spacing="2">
                        <Label 
                            Text="{Binding Welcome}"
                            FontAttributes="Bold" 
                            FontSize="Large" 
                            TextColor="White" 
                            Margin="10,0,0,0" 
                            VerticalOptions="Center"/>
                        <!--<Frame 
                            Margin="10,0,0,0"  
                            BackgroundColor="Transparent" 
                            HasShadow="False" 
                            HeightRequest="25" 
                            Padding="0" 
                            IsVisible="{Binding LocationIsVisible}">-->
                        <StackLayout 
                            Orientation="Horizontal" 
                            Margin="10,0,0,0" 
                            IsVisible="{Binding LocationIsVisible}">
                            <Image 
                                Source="locate_icon_white" 
                                HeightRequest="25" 
                                Aspect="AspectFit" 
                                Margin="0" />
                            <Label 
                                Text="{Binding Location}"
                                FontAttributes="Bold" 
                                FontSize="Default" 
                                TextColor="White" 
                                VerticalOptions="Center"/>
                        </StackLayout>
                        <!--</Frame>-->
                    </StackLayout>
                </StackLayout>
            </Grid>
        </Shell.FlyoutHeader>
    
        <Shell.FlyoutFooter>
            <controls:FlyoutFooter />
        </Shell.FlyoutFooter>
    
        <FlyoutItem 
            Shell.TabBarIsVisible="False" 
            FlyoutDisplayOptions="AsMultipleItems">
            <ShellContent 
                Title="Change Working Location" 
                Icon="navigation.png" 
                ContentTemplate="{DataTemplate pages:LocationPage}" />
            <ShellContent 
                Title="Main Menu"
                Icon="home_grey.png" 
                ContentTemplate="{DataTemplate pages:AboutPage}" />
            <!--<ShellContent 
                Title="Locate Tag" 
                Icon="locate_icon.png" 
                ContentTemplate="{DataTemplate pages:LocateTag}" />
            <ShellContent 
                Title="Settings" 
                Icon="setting_grey.png" 
                ContentTemplate="{DataTemplate pages:SettingsPage}"/>-->
            <!--<ShellContent Title="Main Menu" Icon="home_grey.png" ContentTemplate="{DataTemplate pages:AboutPage}" />
            <ShellContent Title="Settings" Icon="setting_grey.png" ContentTemplate="{DataTemplate pages:SettingsPage}"/>-->
        </FlyoutItem>
    
    </Shell>

AppShell.xaml.cs

        public partial class AppShell : Shell
        {
            private AppShellViewModel _viewModel;
            public Dictionary<string, Type> Routes { get; private set; } = new Dictionary<string, Type>();
        
            public AppShell()
            {
                InitializeComponent();
                BindingContext = _viewModel = new AppShellViewModel();
                PropertyChanged += Shell_PropertyChanged;
            }
            private void Shell_PropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                _viewModel.UpdateShell(e);
            }
        }

AppShellViewModel.cs

        public class AppShellViewModel : BaseViewModel
        {
            private string _welcome;
            public string Welcome { get => _welcome;  set { _welcome = value; OnPropertyChanged(nameof(Welcome)); } }
    
            private string _firstLetter;
            public string FirstLetter { get => _firstLetter; set { _firstLetter = value; OnPropertyChanged(nameof(FirstLetter)); } }
    
            private string _location;
            public string Location { get => _location; set { _location = value; OnPropertyChanged(nameof(Location)); } }
    
            private bool _locationIsVisible;
            public bool LocationIsVisible { get => _locationIsVisible ; set { _locationIsVisible = value; OnPropertyChanged(nameof(LocationIsVisible)); } }
            public AppShellViewModel()
            {
                Welcome = "Hello, " + "Test";
                FirstLetter = T;
    
            }
    
            public void UpdateShell(PropertyChangedEventArgs e)
            {
                if (e.PropertyName.Equals("FlyoutIsPresented"))
                {
                    if (GlobalVariables.LoginAuth.Location != null)
                    {
                        LocationIsVisible = true;
                        Location = "Test";
                    }
                }
            }
        }

LocationViewModel.cs

    public class LocationViewModel : BaseViewModel
    {
        #region Properties
        private List<JsonLocation> _locations;
        public List<JsonLocation> Locations { get => _locations; set { _locations = value; OnPropertyChanged(nameof(Locations)); } }
        private JsonLocation _location;
        public JsonLocation Location { get => _location; set { _location = value; OnPropertyChanged(nameof(Location)); } }
        public ICommand Tapped_Command { get; set; }
        #endregion
    
    
        public LocationViewModel(INavigation navigation)
        {
            Navigation = navigation;
            Title = "Working Locations";
            Tapped_Command = new Command(List_Tapped);
        }
    
        public async void List_Tapped()
        {
            await Navigation.PushAsync(new AboutPage());
        }
    }

App.xaml.cs（主頁邏輯）

    private async void SetMainPageAsync()
    {
        if (autoLogin)
        {
            try
            {
                var resp = CheckLogin(userName);
                if (resp.Success)
                {
                    MainPage = new AppShell();
                }
                else
                {
                    MainPage = new LoginPage();
                }
            }
            catch (Exception e)
            {
                MainPage = new LoginPage();
            }
    
        }
        else
        {
            MainPage = new LoginPage();
        }
    }

Answer 1

我將每個ShellContent組織在一個FlyoutItem中。 就我而言，導航工作正常。 您還需要設置Route屬性。

請參閱： https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/shell/navigation#register-routes

請看下面的例子：

XAML

<!-- Flyout Items -->
    <FlyoutItem
        Title="{x:Static localization:Strings.Status}"
        >
        <FlyoutItem.Icon>
            <FontImageSource
                FontFamily="{StaticResource MaterialDesignIcons}"
                Glyph="{StaticResource MaterialDesign_ProgressCheck}"
                Color="{DynamicResource PrimaryColor}"
                Size="{StaticResource DefaultIconSize}"
                />
        </FlyoutItem.Icon>
        <!-- Status -->
        <ShellContent 
            Title="{x:Static localization:Strings.Status}" 
            ContentTemplate="{DataTemplate views:KlipperStatePage}"
            Route="KlipperStatePage"
            />
    </FlyoutItem>

<FlyoutItem
        Title="{x:Static localization:Strings.ControlPanel}" 
        >
        <FlyoutItem.Icon>
            <FontImageSource
                FontFamily="{StaticResource MaterialDesignIcons}"
                Glyph="{StaticResource MaterialDesign_TuneVertical}"
                Color="{DynamicResource PrimaryColor}"
                Size="{StaticResource DefaultIconSize}"
                />
        </FlyoutItem.Icon>
        <ShellContent
            ContentTemplate="{DataTemplate views:SingleControlPanelPage}"
            Route="SingleControlPanelPage"
            IsEnabled="{Binding IsLightVersion,Converter={StaticResource BooleanReverseVisibilityConverter}}"
            >
        </ShellContent>
    </FlyoutItem>

Answer 2

我做了一個樣本來測試並遇到了同樣的問題。 似乎 FlyoutItem 在毛伊島的特殊行為。 如果您想在用戶單擊 FlyoutItem 時將 go 轉到根頁面而不是導航到內容頁面的最后一頁，您可以嘗試以下代碼。

在 AppShell.xaml 中：

        <ShellContent 
            Title="Change Working Location" 
            Icon="navigation.png" 
            ContentTemplate="{DataTemplate pages:LocationPage}"
            Route="LocationPage"/>
        <ShellContent 
            Title="Main Menu"
            Icon="home_grey.png" 
            ContentTemplate="{DataTemplate pages:AboutPage}" 
            Route="AboutPage"/>

在點擊事件中：

 public async void List_Tapped()
    {
        await Shell.Current.GoToAsync($"//{nameof(AboutPage)}");
    }