.NET MAUI中iOS端AppShell TabBar图标无法变色问题咨询

这不是bug，属于iOS平台和Android平台的默认行为差异：Android会自动为Tab图标应用选中/未选中的色调变化，而iOS的FontImageSource默认不会继承TabBar的选中状态颜色，需要显式配置来实现一致效果。

下面提供两种可行的解决方式：

方案一：全局样式统一配置 #

在App.xaml的ResourceDictionary中添加全局样式，自动应用到所有Tab，无需修改单个Tab的代码：

<!-- 先定义主题颜色资源，可根据需求调整 -->
<Color x:Key="TabBarSelectedColor">#2196F3</Color>
<Color x:Key="TabBarUnselectedColor">#757575</Color>
<Color x:Key="TabBarSelectedDarkColor">#64B5F6</Color>
<Color x:Key="TabBarUnselectedDarkColor">#BDBDBD</Color>

<!-- Tab的全局样式 -->
<Style TargetType="Tab">
    <!-- 默认未选中状态的图标颜色 -->
    <Setter Property="IconColor" 
            Value="{AppThemeBinding Light={StaticResource TabBarUnselectedColor}, Dark={StaticResource TabBarUnselectedDarkColor}}" />
    <!-- 选中状态触发颜色切换 -->
    <Style.Triggers>
        <Trigger TargetType="Tab" Property="IsSelected" Value="True">
            <Setter Property="IconColor" 
                    Value="{AppThemeBinding Light={StaticResource TabBarSelectedColor}, Dark={StaticResource TabBarSelectedDarkColor}}" />
        </Trigger>
    </Style.Triggers>
</Style>

方案二：单个Tab绑定定制 #

如果需要针对特定Tab单独设置，可以结合转换器实现颜色绑定：

1. 创建布尔值转颜色的转换器：

public class BoolToTabColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var isSelected = (bool)value;
        var shell = parameter as Shell;
        return isSelected ? shell.TabBarSelectedColor : shell.TabBarUnselectedColor;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 在App.xaml中注册转换器：

<local:BoolToTabColorConverter x:Key="BoolToTabColorConverter" />

3. 修改Tab的Icon代码：

<Tab.Icon>
    <FontImageSource FontFamily="MaterialIconsRound" 
                     Glyph="home"
                     Color="{Binding IsSelected, 
                            RelativeSource={RelativeSource AncestorType={x:Type Tab}},
                            Converter={StaticResource BoolToTabColorConverter},
                            ConverterParameter={x:Static Shell.Current}}" />
</Tab.Icon>

额外说明 #

如果希望使用系统默认或自定义的TabBar颜色，可在Shell根节点提前设置：

<Shell ...
       TabBarSelectedColor="#2196F3"
       TabBarUnselectedColor="#757575">
    <!-- TabBar内容 -->
</Shell>

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