.net 8.0 Android MUAL Shell flyout 浮动抽屉不显示图标处理方法

最新版本的.net 8.0 MUAL Shell flyout 控件直接在shell文件中加入会发现显示不出来图标。

直接使用。

<Shell
     x:Class="contrastApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   
    xmlns:local="clr-namespace:contrastApp.pages">
  
    <FlyoutItem Title="主页" Icon="home.png">
        <ShellContent Title="主页" Icon="home.png"
            ContentTemplate="{DataTemplate local:HomePage}"
           />
        <ShellContent Title="关于" Icon="drawer.png"
        ContentTemplate="{DataTemplate local:AboutPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="关于" Icon="home.png">
        <ShellContent Title="关于" Icon="drawer.png"
         ContentTemplate="{DataTemplate local:AboutPage}"
     />
    </FlyoutItem>


</Shell>

直接使用FlyoutItem 是可以拖动出来的但是看不到抽屉的按钮，并且点击flyout控件位置是可以显示flyout的。

解决方法 只需要在shell代码中加入一行代码设置下标题头颜色即可

<Shell
     x:Class="contrastApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   <!-- 注意这里是新增的一行代码，设置shell相关的代码都要用shell.出来设置。 -->
 Shell.BackgroundColor="Blue"


    xmlns:local="clr-namespace:contrastApp.pages">
    
    <FlyoutItem Title="主页" Icon="home.png">
        <ShellContent Title="主页" Icon="home.png"
            ContentTemplate="{DataTemplate local:HomePage}"
           />
        <ShellContent Title="关于" Icon="drawer.png"
        ContentTemplate="{DataTemplate local:AboutPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="关于" Icon="home.png">
        <ShellContent Title="关于" Icon="drawer.png"
         ContentTemplate="{DataTemplate local:AboutPage}"
     />
    </FlyoutItem>


</Shell>

 

应用后