.NET MAUI Shell自定义渲染器导致TabBarUnselectedColor重置的解决方法

问题根源 #

自定义实现IShellBottomNavViewAppearanceTracker时，完全替换了默认的外观处理逻辑——默认渲染器原本会读取Shell.TabBarUnselectedColor等XAML中设置的属性值并应用到TabBar上，而自定义实现没有继承或调用原有逻辑，导致原有颜色配置被清空，TabBar转而使用系统默认颜色。

解决方案 #

1. 继承默认外观追踪器，保留原有逻辑 #

不要直接实现IShellBottomNavViewAppearanceTracker，改为继承默认的BottomNavViewAppearanceTracker，这样可以复用系统原本的颜色、样式设置，只添加多行文本的自定义逻辑：

internal class LaticreteShellRenderer : ShellRenderer
{
    public LaticreteShellRenderer(Context context) : base(context) { }

    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new LaticreteTabLayout(this, shellItem);
    }

    public class LaticreteTabLayout : BottomNavViewAppearanceTracker
    {
        public LaticreteTabLayout(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem) { }

        public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            // 先调用父类方法，应用XAML中设置的颜色等默认外观
            base.SetAppearance(bottomView, appearance);

            // 自定义多行文本逻辑
            bottomView.SetMinimumHeight(180);

            if (bottomView.GetChildAt(0) is BottomNavigationMenuView bottomNavView)
            {
                for (int i = 0; i < bottomNavView.ChildCount; i++)
                {
                    if (bottomNavView.GetChildAt(i) is BottomNavigationItemView item && item.GetChildAt(1) is BaselineLayout itemTitle)
                    {
                        if (itemTitle.GetChildAt(0) is TextView smallTextView)
                            smallTextView.SetLines(2);
                        if (itemTitle.GetChildAt(1) is TextView largeTextView)
                            largeTextView.SetLines(2);
                    }
                }
            }
        }

        public override void ResetAppearance(BottomNavigationView bottomView)
        {
            // 调用父类方法重置外观
            base.ResetAppearance(bottomView);
        }
    }
}

2. 引用XAML中的自定义颜色（可选） #

如果需要在渲染器中手动引用App.xaml/Colors.xaml里的LaticreteColor，可以通过以下方式转换为Android可用的Color：

// 获取XAML中的颜色资源
var laticreteColor = (Color)Application.Current.Resources["LaticreteColor"];
// 转换为Android Color
var androidColor = Android.Graphics.Color.Rgb(
    (int)(laticreteColor.Red * 255),
    (int)(laticreteColor.Green * 255),
    (int)(laticreteColor.Blue * 255)
);

3. 手动设置图标与文本颜色（可选） #

如果需要在渲染器中手动指定选中/未选中的图标和文本颜色，可以在SetAppearance中添加以下代码：

// 区分选中与未选中状态的颜色配置
var colorStateList = new ColorStateList(
    new int[][]
    {
        new int[] { Android.Resource.Attribute.StateChecked }, // 选中状态
        new int[] { } // 未选中状态
    },
    new int[]
    {
        Android.Graphics.Color.White, // 选中时的颜色
        androidColor // 未选中时的颜色
    }
);
bottomView.ItemIconTintList = colorStateList;
bottomView.ItemTextColor = colorStateList;

验证效果 #

完成上述修改后，XAML中设置的Shell.TabBarUnselectedColor会被正常应用，同时Tab文本会保持多行显示，图标颜色也会符合配置。

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