如何让Xamarin Shell顶部Tab均匀占满页面宽度？

要解决Shell中顶部Tab挤在一起的问题，目前最可靠的方案是通过自定义平台渲染器实现，以下是针对Android和iOS的具体步骤：

Android端实现 #

创建自定义Shell渲染器，修改TabLayout的布局模式，让Tab自动填充整个宽度：

using Android.Content;
using Android.Support.Design.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(AppShell), typeof(你的项目命名空间.Droid.CustomShellRenderer))]
namespace 你的项目命名空间.Droid
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        {
            return new CustomTabLayoutAppearanceTracker(this);
        }
    }

    public class CustomTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
    {
        public CustomTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
        {
        }

        public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
        {
            base.SetAppearance(tabLayout, appearance);
            // 设置Tab固定模式并填充整个宽度
            tabLayout.TabMode = TabLayout.ModeFixed;
            tabLayout.TabGravity = TabLayout.GravityFill;
        }
    }
}

iOS端实现 #

修改iOS的ShellSection渲染器，调整顶部分段控件的宽度分配逻辑：

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(AppShell), typeof(你的项目命名空间.iOS.CustomShellRenderer))]
namespace 你的项目命名空间.iOS
{
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            return new CustomShellSectionRenderer(this);
        }
    }

    public class CustomShellSectionRenderer : ShellSectionRenderer
    {
        public CustomShellSectionRenderer(IShellContext shellContext) : base(shellContext)
        {
        }

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            
            // 获取顶部的分段控件
            if (NavigationItem.TitleView is UISegmentedControl segmentedControl)
            {
                // 关闭按内容分配宽度，让系统自动均匀分配
                segmentedControl.ApportionsSegmentWidthsByContent = false;
                
                // 若自动分配效果不佳，可手动设置固定宽度
                // var screenWidth = UIScreen.MainScreen.Bounds.Width;
                // segmentedControl.SetWidth(screenWidth / segmentedControl.NumberOfSegments, 0);
            }
        }
    }
}

注意事项 #

1. 将代码中的你的项目命名空间替换为你项目的实际命名空间
2. 清理并重新生成项目，确保渲染器被正确加载
3. 若Tab文本过长，建议适当缩短或调整字体大小，避免布局异常

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