.NET MAUI中如何设置单个TabBar标签的颜色

.NET MAUI Shell的TabBar本身没有提供直接设置单个标签背景色的属性，需要通过**平台特定的Handler（自定义外观追踪器）**来实现，以下是针对iOS和Android的具体实现步骤：

Android 平台实现 #

1. 在Android项目中创建自定义ShellTabBarAppearanceTracker：

using Android.Views;
using Android.Widget;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Platform.Compatibility;

namespace MyApp.Platforms.Android;

public class CustomTabBarHandler : ShellTabBarAppearanceTracker
{
    public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        base.SetAppearance(bottomView, appearance);

        // 定位到第二个标签（索引从0开始，对应TAB 2）
        var targetTab = bottomView.Menu.GetItem(1);
        if (targetTab == null) return;

        // 将Bisque颜色转为Android平台的Color对象
        var bisqueColor = Android.Graphics.Color.ParseColor("#FFE4C4");
        targetTab.SetBackground(new Android.Graphics.Drawables.ColorDrawable(bisqueColor));
    }
}

2. 在项目的MauiProgram.cs中注册该Handler：

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

iOS 平台实现 #

1. 在iOS项目中创建自定义ShellTabBarAppearanceTracker：

using UIKit;
using Microsoft.Maui.Controls.Platform;
using Foundation;

namespace MyApp.Platforms.iOS;

public class CustomTabBarHandler : ShellTabBarAppearanceTracker
{
    public override void UpdateLayout(UITabBarController controller)
    {
        base.UpdateLayout(controller);

        var tabBar = controller.TabBar;
        if (tabBar.Items == null || tabBar.Items.Length <= 1) return;

        // 定位到第二个标签（索引从0开始，对应TAB 2）
        var targetTab = tabBar.Items[1];
        if (targetTab == null) return;

        // 获取TabItem的视图并创建背景视图
        var tabView = targetTab.ValueForKey(new NSString("view")) as UIView;
        if (tabView == null) return;

        var bgView = new UIView(tabView.Bounds)
        {
            BackgroundColor = UIColor.FromHex(0xFFE4C4), // Bisque的十六进制色值
            AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight
        };

        // 将背景视图插入到TabItem视图的最底层
        tabView.InsertSubview(bgView, 0);
    }
}

2. 在项目的MauiProgram.cs中注册该Handler：

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

注意事项 #

• 标签索引：Tab的索引从0开始，若你的Tab顺序调整，需要对应修改代码中的索引值。
• 颜色适配：如果需要动态切换颜色，可以在Handler中添加逻辑监听Tab切换事件，再更新对应标签的背景色。
• iOS兼容性：通过ValueForKey("view")访问UITabBarItem的视图属于私有API范畴，但在MAUI场景下该方式稳定可用，若有顾虑也可通过自定义UITabBar子类实现。

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