Xamarin.Forms 和 Shell：有没有办法只为活动选项卡指定图标的颜色？

Question

我正在开发一个基于 Shell 的 Xamarin.Forms 应用程序，我正在使用字体图标作为TabBar的图标：

<TabBar>
    <ShellContent Title="Home" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}">
        <ShellContent.Icon>
            <FontImageSource Glyph="{StaticResource FasIconHome}" FontFamily="FontAwesomeSolid" />
        </ShellContent.Icon>
    </ShellContent>
</TabBar>

我只想为 活动选项卡 指定颜色，但 仅为图标 ，而不是文本，因为我们可以在 Airbnb 上看到：

我在 Shell 设置中没有找到任何选项：

<Setter Property="Shell.BackgroundColor" Value="White" />
<Setter Property="Shell.ForegroundColor" Value="Black" />
<Setter Property="Shell.TitleColor" Value="Black" />
<Setter Property="Shell.DisabledColor" Value="{StaticResource Gray-300}" />
<Setter Property="Shell.UnselectedColor" Value="{StaticResource Gray-300}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="White" />
<Setter Property="Shell.TabBarForegroundColor" Value="{StaticResource Gray-300}"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95000000" />
<Setter Property="Shell.TabBarTitleColor" Value="Black" />

可以吗

Answer 1

在您的例子中，您使用了 FontImageSource 来设置标签项的图标。但是，如果要设置特定项目图标的颜色，则需要提前下载不同颜色的图标，并将图标放在原生平台（Asset in iOS 和 Drawable 在 Android) 中。并使用 Custom Renderer

进行设置

在iOS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using xxx;
using xxx.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace xxx.iOS
{
    public class ShellCustomRenderer : ShellRenderer
    {
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new TabBarAppearance();
        }

    }

    public class TabBarAppearance : IShellTabBarAppearanceTracker
    {
        public void Dispose()
        {

        }

        public void ResetAppearance(UITabBarController controller)
        {
            

        }
      
        public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            UITabBar myTabBar = controller.TabBar;

            if (myTabBar.Items != null)
            {
                var item = myTabBar.Items[0];

                //default icon
                item.Image = UIImage.FromBundle("xxx.png").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);

                //selected icon
                item.SelectedImage = UIImage.FromBundle("xxx.png").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
            }
        }

        

        public void UpdateLayout(UITabBarController controller)
        {
        }
    }   

}

在Android

[assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer ))]
namespace xxx.Droid
{
    public class ShellCustomRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new CustomBottomNavAppearance();
        }
    }

    public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {

        }

        public void ResetAppearance(BottomNavigationView bottomView)
        {

        }

        public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
        {
            bottomView.ItemIconTintList = null;
            IMenu myMenu = bottomView.Menu;

            IMenuItem myItemOne = myMenu.GetItem(0);

            if (myItemOne.IsChecked)
            {
                myItemOne.SetIcon(Resource.Drawable.xxx); // selected icon
            }
            else
            {
                myItemOne.SetIcon(Resource.Drawable.xxx); //default icon
            }

         

        }
    }
}

Xamarin.Forms 和 Shell：有没有办法只为活动选项卡指定图标的颜色？

Xamarin.Forms with Shell: is there a way to specify a icon's color for active tab only?

fonts

tabbar

xamarin.forms

xamarin.shell

在iOS

在Android