.NET MAUI 8底部选项卡页面如何保留图标原始颜色

针对你设置底部选项卡后图标颜色异常、C#代码调整无效的问题，以下是几种可行的解决方法：

方法1：通过全局样式统一设置 #

在App.xaml或当前页面的资源字典中定义TabbedPage样式，直接指定未选中/选中状态的图标颜色：

<ResourceDictionary>
    <Style TargetType="TabbedPage">
        <!-- 未选中状态图标颜色 -->
        <Setter Property="TabIconColor" Value="#888888"/>
        <!-- 选中状态图标颜色 -->
        <Setter Property="TabSelectedIconColor" Value="#FF0000"/>
    </Style>
</ResourceDictionary>

如果需要区分平台，可添加平台判断：

<Style TargetType="TabbedPage">
    <Setter Property="TabIconColor">
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android" Value="#888888"/>
            <On Platform="iOS" Value="#888888"/>
        </OnPlatform>
    </Setter>
    <Setter Property="TabSelectedIconColor">
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android" Value="#FF0000"/>
            <On Platform="iOS" Value="#FF0000"/>
        </OnPlatform>
    </Setter>
</Style>

方法2：动态添加页面时单独设置每个页面的图标颜色 #

在你循环添加子页面的代码中，直接给每个ContentPage设置图标颜色属性：

foreach (var page in viewModel.TabPages)
{
    page.IconColor = Color.FromArgb("#888888"); // 未选中状态
    page.SelectedIconColor = Color.FromArgb("#FF0000"); // 选中状态
    this.Children.Add(page);
}

方法3：修改Android原生主题（针对平台深层样式） #

如果上述方法无效，可直接调整Android主题文件：

1. 打开Platforms/Android/Resources/values/styles.xml，在你的App主题中添加以下属性：

<style name="MyTheme" parent="Theme.Maui.Light">
    <!-- 未选中的图标和文字颜色 -->
    <item name="android:itemIconTint">@color/tab_unselected_color</item>
    <item name="android:itemTextColor">@color/tab_unselected_color</item>
    <!-- 选中的图标和文字颜色 -->
    <item name="android:colorPrimary">@color/tab_selected_color</item>
</style>

2. 在Platforms/Android/Resources/values/colors.xml中定义颜色值：

<color name="tab_unselected_color">#888888</color>
<color name="tab_selected_color">#FF0000</color>

方法4：Android自定义渲染器（精细控制） #

若需要更复杂的样式逻辑，可编写Android平台的自定义渲染器：

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace LacosLiterarios.Platforms.Android.Renderers;

public class CustomTabbedPageRenderer : TabbedPageRenderer
{
    public CustomTabbedPageRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
    {
        base.OnElementChanged(e);

        if (ViewGroup is BottomNavigationView bottomNav)
        {
            // 设置未选中图标颜色
            bottomNav.ItemIconTintList = ColorStateList.ValueOf(Android.Graphics.Color.ParseColor("#888888"));
            // 设置选中图标颜色
            bottomNav.SetSelectedItemColor(Android.Graphics.Color.ParseColor("#FF0000"));
        }
    }
}

之前你的C#代码调整无效，大概率是因为TabbedPage的全局属性被平台原生样式覆盖，或未针对每个子页面的图标颜色属性进行设置。

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