.NET MAUI 上操作栏上方的空白区域

White space above action bar on .NET MAUI

提问人:user3159043 提问时间:10/30/2023 更新时间:10/30/2023 访问量:81

问:

我有一个用 .NET MAUI 制作的新应用程序,我正在为一些奇怪的问题而苦苦挣扎,我的操作栏上方有一个额外的空白:

enter image description here

我不知道它是什么,有谁知道如何删除它? 这是我的布局(我在这个应用程序中还没有任何代码)

App.xaml

    <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:xxxxxx"
             x:Class="xxxxx.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

AppShell.xaml

<Shell
    x:Class="equinovet_2.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:xxxxx.Pages"
    FlyoutBackground="{StaticResource gradientxxxxx}"
    Shell.FlyoutBehavior="Flyout">

    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid ColumnSpacing="20">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=".25*" />
                    <ColumnDefinition Width=".75*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <StackLayout
                    Grid.Column="0"
                    Padding="0,50,0,50"
                    HorizontalOptions="End"
                    VerticalOptions="Center">
                    <Image
                        HorizontalOptions="End"
                        MaximumHeightRequest="40"
                        Source="ic_horse.png" />
                </StackLayout>
                <StackLayout
                    Grid.Column="1"
                    Padding="0,50,0,50"
                    HorizontalOptions="Start"
                    VerticalOptions="Center">
                    <Image
                        HorizontalOptions="Start"
                        MaximumHeightRequest="30"
                        Source="logo.png" />
                    <Label
                        FontSize="16"
                        Text="Médico Veterinário"
                        TextColor="white" />
                </StackLayout>
            </Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>

    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.25*,.75*">
                <Image
                    Margin="15,15,15,15"
                    HeightRequest="25"
                    Source="{Binding FlyoutIcon}" />
                <Label
                    Grid.Column="1"
                    FontAttributes="Bold"
                    Text="{Binding Title}"
                    TextColor="white"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Meu Perfil"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_colaboradores.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Início"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_home.png"
            Route="MainPage" />

        <ShellContent
            Title="Procedimentos"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_procedimentos.png"
            Route="MainPage" />

        <ShellContent
            Title="Animais"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_animais.png"
            Route="MainPage" />

        <ShellContent
            Title="Proprietários"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_colaboradores.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Controle Folicular"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_folicular.png"
            Route="MainPage" />

        <ShellContent
            Title="Reprodução"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_reproducao.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Serviços"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_services.png"
            Route="MainPage" />

        <ShellContent
            Title="Estoque"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_storage.png"
            Route="MainPage" />

        <ShellContent
            Title="Fornecedores"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_fornecedores.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Financeiro"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_financeiro.png"
            Route="MainPage" />

        <ShellContent
            Title="Relatórios Financeiros"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_chart.png"
            Route="MainPage" />

        <ShellContent
            Title="Relatórios de Serviços"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_folicular.png"
            Route="MainPage" />

        <ShellContent
            Title="Agenda"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_calendar.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Catálogo de Exames"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_exames.png"
            Route="MainPage" />

        <ShellContent
            Title="Colaboradores"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_colaboradores.png"
            Route="MainPage" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Configurações"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_config.png"
            Route="MainPage" />
        <ShellContent
            Title="Sincronização"
            ContentTemplate="{DataTemplate local:MainPage}"
            FlyoutIcon="ic_sync.png"
            Route="MainPage" />

    </FlyoutItem>


</Shell>

MainPage.xaml

<ContentPage
    x:Class="xxxxx.Pages.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Início"
    Background="gray">
    <Label Text="teste" />
</ContentPage>

Styles.xaml(几乎是 .NET MAUI 默认值,下面是我添加的唯一新内容)

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Shadow
        x:Key="shadow"
        Brush="black"
        Opacity="0.3"
        Radius="15"
        Offset="0,15" />

    <Style Class="FrameBorder" TargetType="Frame">
        <Setter Property="HeightRequest" Value="50" />
        <Setter Property="Padding" Value="10,5" />
        <Setter Property="BorderColor" Value="{StaticResource Gray300}" />
    </Style>
</ResourceDictionary>

我不知道代码是否相关,但对于这个屏幕来说,只有这两个...... 我感谢任何帮助,我是 .NET MAUI 的新手,对它了解不多

谢谢

C# Android .NET XAML 毛伊

评论

0赞 NKR 10/31/2023
我在模拟器中使用了您的 Shell Xaml,但我没有看到任何额外的空间。您可以尝试使用其他模拟器并检查是否仍然看到空白吗?我用 Pixel 5 进行了测试。
0赞 user3159043 10/31/2023
刚刚在新的 Pixel 5 模拟器上进行了测试,仍然获得了额外的空间,无法弄清楚这是什么
0赞 Sean He-MSFT 11/1/2023
我根据您的代码创建了项目,操作栏上方没有空格。您能否提供一个最小的、可重现的示例?有关具体步骤,您可以参考此链接:如何创建最小的、可重现的示例

答: 暂无答案