.NET MAUI iOS AppShell TabBar字体与图标大小修改方法

我当前有如下AppShell代码：

<Shell.Resources>
    <Style x:Key="BaseStyle"
           TargetType="Element">
        <Setter Property="Shell.BackgroundColor"
                Value="{DynamicResource YouviRed}" />
        <Setter Property="Shell.ForegroundColor"
                Value="White" />
        <Setter Property="Shell.TitleColor"
                Value="White" />
        <Setter Property="Shell.DisabledColor"
                Value="#B4FFFFFF" />
        <Setter Property="Shell.UnselectedColor"
                Value="#95FFFFFF" />
        <Setter Property="Shell.NavBarIsVisible" 
                Value="False" />
    </Style>
</Shell.Resources>
<TabBar>
    <ShellContent Title="{ext:Translate Dashboard}" 
                  Style="{StaticResource BaseStyle}"
                  Icon="dashboard.png" 
                  ContentTemplate="{DataTemplate navi:CustomNavigationPage}" 
                  Route="Dashboard"  >
        <dash:DashboardView/>
    </ShellContent>
    <ShellContent Title="{ext:Translate Rooms}" 
                  Style="{StaticResource BaseStyle}"
                  Icon="rooms.png" 
                  ContentTemplate="{DataTemplate navi:CustomNavigationPage}" 
                  Route="Rooms" >
        <rooms:RoomsView/>
    </ShellContent>
    <ShellContent  Title="{ext:Translate Settings}"
                   Style="{StaticResource BaseStyle}"
                   Icon="settings.png" 
                   ContentTemplate="{DataTemplate navi:CustomNavigationPage}" 
                   Route="Settings"  >
        <sett:SettingsView />
    </ShellContent>
</TabBar>

现在iOS端的TabBar存在标题字体过小、图标过大的问题，想知道调整这些尺寸的方法，是否需要用特定Handler，或者有没有更优的实现方式？

方法1：利用MAUI Shell内置属性快速调整 #

MAUI Shell提供了直接控制TabBar元素尺寸的属性，只需在你的BaseStyle中添加对应的Setter即可：

<Setter Property="Shell.TabBarTitleFontSize" Value="14" /> <!-- 自定义标题字体大小 -->
<Setter Property="Shell.TabBarIconSize" Value="24" /> <!-- 自定义图标尺寸 -->

如果需要区分选中/未选中状态的样式，还可以补充：

<Setter Property="Shell.TabBarTitleFontAttributes" Value="Bold" /> <!-- 标题加粗 -->
<Setter Property="Shell.TabBarUnselectedTitleColor" Value="#95FFFFFF" /> <!-- 未选中标题颜色 -->

方法2：自定义iOS Handler（精细控制） #

如果内置属性满足不了需求，可通过自定义iOS平台的ShellTabBarAppearanceTracker实现更灵活的调整：

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

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

namespace YourAppNamespace.iOS.Handlers;

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

        // 调整图标显示尺寸（通过内边距压缩视觉空间）
        if (controller.TabBar.Items != null)
        {
            foreach (var item in controller.TabBar.Items)
            {
                item.ImageInsets = new UIEdgeInsets(-8, 0, 8, 0); // 上移图标，缩小垂直方向占比
            }
        }

        // 配置标题字体样式
        var itemAppearance = new UITabBarItemAppearance();
        // 未选中状态
        itemAppearance.Normal.TitleTextAttributes = new UIStringAttributes
        {
            Font = UIFont.SystemFontOfSize(14),
            ForegroundColor = UIColor.FromWhiteAlpha(1, 0.6f)
        };
        // 选中状态
        itemAppearance.Selected.TitleTextAttributes = new UIStringAttributes
        {
            Font = UIFont.BoldSystemFontOfSize(14),
            ForegroundColor = UIColor.White
        };

        // 应用样式到TabBar
        var tabBarAppearance = new UITabBarAppearance
        {
            StackedLayoutAppearance = itemAppearance,
            InlineLayoutAppearance = itemAppearance,
            CompactInlineLayoutAppearance = itemAppearance
        };
        controller.TabBar.StandardAppearance = tabBarAppearance;
        controller.TabBar.ScrollEdgeAppearance = tabBarAppearance; // 适配iOS15+滚动状态
    }
}

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

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler(typeof(Shell), typeof(CustomShellTabBarAppearanceTracker));
#endif
});

方法3：自定义底部导航栏（最高灵活性） #

如果需要完全自定义布局，可放弃原生Shell TabBar，用HorizontalStackLayout封装按钮实现底部导航，这种方式可以完全控制图标大小、字体样式、间距等所有细节，但需要自行处理页面切换逻辑和状态管理。

注意事项 #

• 建议使用SVG矢量图标，避免调整大小时出现模糊
• 尺寸设置需符合iOS人机交互规范，避免影响用户体验
• 自定义Handler仅对iOS生效，不会干扰其他平台的表现

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