.NET MAUI 中的标题栏颜色错误有解决方法吗？

Question

为什么标题栏会改变颜色？这个（可能的）错误有解决方法吗？

为了验证这是否可以重现，我创建了一个新的 .NET MAUI 项目。我在下面添加了我的新项目的所有代码。虽然有点多，但实际上只有 3 页，其中的按钮带有使用

Shell

进行导航的命令。没什么特别的。页面A和B都可以导航到C。唯一的区别是：A使用绝对路径/B/C导航到C，而B直接导航到C（压入堆栈）。所以在任何情况下，从 C 页面返回总是会到达 B 页面。

发生的事情是这样的：
B > C >（返回）B = B 上的标题栏保持不变
A > B/C >（返回）B = B 上的标题栏将背景颜色更改为深灰色，意外

离开页面然后再次返回后，标题栏确实会恢复正常。标题栏颜色变化在整个应用程序生命周期中并不是永久的。

更新
此错误已在 Github 上的 .NET MAUI 问题部分报告。

预览
使用 Pixel 5 Android 13 API 33 模拟器：在本示例中，我使用设备的后退按钮，但在 XAML 中使用页面上的

<Button/>

并使用返回页面 B 的命令时，也会发生同样的情况。没有什么区别。

AppShell

<Shell
    x:Class="TitleBarTest.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TitleBarTest"
    Shell.FlyoutBehavior="Flyout">
    <FlyoutItem Title="Title Bar Test">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"
                      Shell.FlyoutItemIsVisible="True"
                      Shell.TabBarIsVisible="True"
                      Title="Page A" 
                      Route="MainPage"/>
        <ShellContent ContentTemplate="{DataTemplate local:SecondPage}"
                      Shell.FlyoutItemIsVisible="True"
                      Shell.TabBarIsVisible="True"
                      Title="Page B"
                      Route="SecondPage"/>
    </FlyoutItem>
    <ShellContent ContentTemplate="{DataTemplate local:ModalPage}"
                  Shell.FlyoutItemIsVisible="False"
                  Shell.TabBarIsVisible="False"
                  Title="Page C" 
                  Route="ModalPage"/>
</Shell>

A页

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TitleBarTest"
             x:DataType="local:MainPageViewModel"
             x:Class="TitleBarTest.MainPage"
             Title="Page A">
    <VerticalStackLayout>
        <Label 
            Text="List of A-items"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Button
                Command="{Binding GoToModalViaSecondPageCommand}"
                x:Name="CounterBtn"
                Text="Go to C via B"
                HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

查看模型A：

public class MainPageViewModel : BaseViewModel
{
    public Command GoToModalViaSecondPageCommand { get; private set; }

    public MainPageViewModel()
    {
        GoToModalViaSecondPageCommand = new Command(GoToModalViaSecondPage);
    }

    public async void GoToModalViaSecondPage()
    {
        await Shell.Current.GoToAsync($"//{nameof(SecondPage)}/{nameof(ModalPage)}");
    }
}

B页

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TitleBarTest"
             x:DataType="local:SecondPageViewModel"
             x:Class="TitleBarTest.SecondPage"
             Title="Page B">
    <VerticalStackLayout>
        <Label 
            Text="List of B-items"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Button
                Command="{Binding GoToModalDirectlyCommand}"
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

查看模型 B：

public class SecondPageViewModel : BaseViewModel
{
    public Command GoToModalDirectlyCommand { get; private set; }

    public SecondPageViewModel()
    {
        GoToModalDirectlyCommand = new Command(GoToModalDirectly);
    }

    public async void GoToModalDirectly()
    {
        await Shell.Current.GoToAsync($"{nameof(ModalPage)}");
    }
}

C页

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TitleBarTest"
             x:DataType="local:ModalPageViewModel"
             x:Class="TitleBarTest.ModalPage"
             Shell.PresentationMode="ModalAnimated"
             BackgroundColor="#AA000000"
             Title="Page C">
    <StackLayout VerticalOptions="End">
        <Frame BackgroundColor="White"
               CornerRadius="24"
               HeightRequest="256"
               Margin="0,0,0,-24">
            <VerticalStackLayout>
                <Label 
                    Text="Create new B-item"
                    VerticalOptions="Center" 
                    HorizontalOptions="Center" />
            </VerticalStackLayout>
        </Frame>
    </StackLayout>
</ContentPage>

查看模型 C：

public class ModalPageViewModel : BaseViewModel
{
    public Command BackToPageBCommand { get; private set; }

    public ModalPageViewModel()
    {
        BackToPageBCommand = new Command(BackToPageB);
    }

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

样式.xaml
回应 FreakyAlis 的评论：默认情况下，

Shell.BackgroundColor

在 Styles.xaml 中定义，当我删除它时，all 标题栏具有这种灰色。似乎在某处定义了“后退”颜色。这是默认值：

<Style TargetType="Shell" ApplyToDerivedTypes="True">
    <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
    ...
    ...
    ...
</Style>

Answer 1

这并不理想，但首先弹出到根目录，然后导航到所需的页面，确实为我提供了针对此特定情况的解决方法。我还更新到了 NET MAUI 8，它本身可能无法解决问题（但可能对此过程有所帮助）。

我不会只使用

await Shell.Current.GoToAsync($"//{nameof(DesiredPage)}", true);

，而是先像这样弹出到根目录：

await Shell.Current.Navigation.PopToRootAsync(true);
await Shell.Current.GoToAsync($"//{nameof(DesiredPage)}", true);

标题栏的背景颜色对我来说不再改变。