.NET MAUI中如何设置选中Tab的背景颜色？

我用.NET MAUI Shell实现了带Flyout菜单的导航，每个FlyoutItem下包含底部TabBar，代码如下：

<FlyoutItem Title="FirstFlyout" Icon="flyout_icon.png">
     <Tab Title="FirstTab" Icon="tab_icon.png">
          <ShellContent ContentTemplate="{DataTemplate view:FirstView}" />
     </Tab>
     <Tab Title="SecondTab" Icon="tab_icon.png">
          <ShellContent ContentTemplate="{DataTemplate view:SecondView}" />
     </Tab>
</FlyoutItem>

我还定义了Tab的样式：

<Style TargetType="Tab">
    <Setter Property="Shell.TabBarBackgroundColor"
        Value="Blue" />
    <Setter Property="Shell.TabBarTitleColor"
        Value="White" />
    <Setter Property="Shell.TabBarUnselectedColor"
        Value="Green" />
</Style>

现在遇到的问题是：TabBarUnselectedColor只控制Tab的文本颜色而非背景色，而且找不到直接设置选中Tab背景色的属性，请问该怎么实现？

MAUI Shell没有原生的选中Tab背景色配置属性，需要通过自定义Handler（平台适配）或完全自定义底部导航组件来实现，以下是两种可行方案：

方案1：自定义Handler适配各平台 #

针对Android和iOS分别编写自定义Handler，修改TabBar选中项的背景样式：

Android端实现 #

1. 在项目Platforms/Android目录下创建自定义Handler：

using Android.Views;
using Microsoft.Maui.Handlers;

namespace YourAppNamespace.Platforms.Android;

public class CustomTabBarHandler : TabBarHandler
{
    protected override void ConnectHandler(View platformView)
    {
        base.ConnectHandler(platformView);
        if (platformView is BottomNavigationView bottomNav)
        {
            // 监听Tab选中事件
            bottomNav.ItemSelected += (s, e) =>
            {
                // 重置所有未选中项背景
                foreach (var menuItem in bottomNav.Menu)
                {
                    menuItem.SetBackgroundResource(Resource.Drawable.unselected_tab_bg);
                }
                // 设置当前选中项背景
                e.Item.SetBackgroundResource(Resource.Drawable.selected_tab_bg);
            };

            // 初始化默认选中项的背景
            var initialSelected = bottomNav.Menu.FindItem(bottomNav.SelectedItemId);
            initialSelected?.SetBackgroundResource(Resource.Drawable.selected_tab_bg);
        }
    }
}

2. 在Resources/drawable目录下创建两个背景样式文件：
   selected_tab_bg.xml（选中状态背景）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF4081" /> <!-- 自定义选中背景色 -->
    <corners android:radius="12dp" />
</shape>

unselected_tab_bg.xml（未选中状态背景）：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#3F51B5" /> <!-- 自定义未选中背景色 -->
    <corners android:radius="12dp" />
</shape>

3. 在MauiProgram.cs中注册Handler：

.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<TabBar, CustomTabBarHandler>();
#endif
})

iOS端实现 #

1. 在项目Platforms/iOS目录下创建自定义Handler：

using UIKit;
using Microsoft.Maui.Handlers;

namespace YourAppNamespace.Platforms.iOS;

public class CustomTabBarHandler : TabBarHandler
{
    protected override void ConnectHandler(UITabBar platformView)
    {
        base.ConnectHandler(platformView);
        // 监听Tab选中变化
        platformView.SelectedItemChanged += (s, e) =>
        {
            foreach (var tabItem in platformView.Items)
            {
                if (tabItem == e.SelectedItem)
                {
                    tabItem.ImageView.BackgroundColor = UIColor.FromHexString("#FF4081"); // 选中背景色
                }
                else
                {
                    tabItem.ImageView.BackgroundColor = UIColor.FromHexString("#3F51B5"); // 未选中背景色
                }
            }
        };

        // 初始化默认选中项背景
        if (platformView.Items?.Length > 0)
        {
            var initialSelected = platformView.Items.FirstOrDefault(i => i == platformView.SelectedItem);
            initialSelected?.ImageView.BackgroundColor = UIColor.FromHexString("#FF4081");
        }
    }
}

2. 在MauiProgram.cs中注册Handler：

.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler<TabBar, CustomTabBarHandler>();
#endif
})

方案2：完全自定义底部导航栏 #

如果不想依赖原生Shell TabBar，可以用HorizontalStackLayout结合自定义按钮实现，通过绑定选中状态控制背景色：

<!-- 放在页面底部的自定义导航栏 -->
<HorizontalStackLayout BackgroundColor="#3F51B5" HeightRequest="60" HorizontalOptions="Fill" Padding="10">
    <Button Text="首页"
            BackgroundColor="{Binding IsHomeSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='#FF4081,#3F51B5'}"
            TextColor="White"
            Command="{Binding SwitchTabCommand}"
            CommandParameter="Home"
            CornerRadius="12"
            Margin="5"
            HorizontalOptions="FillAndExpand"/>
    <Button Text="我的"
            BackgroundColor="{Binding IsMineSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='#FF4081,#3F51B5'}"
            TextColor="White"
            Command="{Binding SwitchTabCommand}"
            CommandParameter="Mine"
            CornerRadius="12"
            Margin="5"
            HorizontalOptions="FillAndExpand"/>
</HorizontalStackLayout>

配合ViewModel维护选中状态，切换时更新绑定值，并通过ContentView或Frame切换页面内容即可。

内容的提问来源于stack exchange，提问作者nimitz