MAUI Shell.TitleView：iOS与Android端无法移除内边距/外边距问题

iOS 端：移除TitleView顶部与侧边多余空间 #

方法1：全局自定义ShellRenderer #

在Platforms/iOS项目中创建自定义渲染器，统一调整导航栏内边距：

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

namespace YourAppNamespace.Platforms.iOS;

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellNavBarAppearanceTracker CreateNavBarAppearanceTracker()
    {
        return new CustomNavBarAppearanceTracker();
    }
}

public class CustomNavBarAppearanceTracker : ShellNavBarAppearanceTracker
{
    public override void SetAppearance(UINavigationBar navigationBar, IShellAppearanceElement appearance)
    {
        base.SetAppearance(navigationBar, appearance);
        // 清除导航栏全局内边距
        navigationBar.LayoutMargins = UIEdgeInsets.Zero;
        navigationBar.PrefersLargeTitles = false;
        
        // 强制TitleView占满导航栏空间
        if (navigationBar.TopItem?.TitleView != null)
        {
            navigationBar.TopItem.TitleView.LayoutMargins = UIEdgeInsets.Zero;
            navigationBar.TopItem.TitleView.Frame = new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, navigationBar.Frame.Height);
        }
    }
}

在MauiProgram.cs中注册该渲染器：

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

方法2：单页面局部调整 #

若仅需针对特定页面修改，可在页面代码后置的OnAppearing中添加iOS专属逻辑：

protected override void OnAppearing()
{
    base.OnAppearing();
#if IOS
    var navBar = (ShellRenderer.Current as ShellRenderer)?.NavigationBar;
    if (navBar != null)
    {
        navBar.LayoutMargins = UIKit.UIEdgeInsets.Zero;
        navBar.TopItem.TitleView.LayoutMargins = UIKit.UIEdgeInsets.Zero;
    }
#endif
}

Android 端：移除左侧空间并居中内容 #

方法1：自定义Toolbar渲染器 #

在Platforms/Android项目中创建自定义ShellRenderer，调整Toolbar的内边距：

using Android.Content;
using AndroidX.AppCompat.Widget;
using Microsoft.Maui.Controls.Platform.Android;

namespace YourAppNamespace.Platforms.Android;

public class CustomShellRenderer : ShellRenderer
{
    public CustomShellRenderer(Context context) : base(context)
    {
    }

    protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
    {
        return new CustomToolbarAppearanceTracker(this);
    }
}

public class CustomToolbarAppearanceTracker : ShellToolbarAppearanceTracker
{
    public CustomToolbarAppearanceTracker(IShellContext context) : base(context)
    {
    }

    public override void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
    {
        base.SetAppearance(toolbar, toolbarTracker, appearance);
        // 清除导航按钮占位带来的左侧内边距
        toolbar.ContentInsetStartWithNavigation = 0;
        toolbar.ContentInsets = new Android.Graphics.Insets(0, 0, 0, 0);
    }
}

在MauiProgram.cs中注册：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<Shell, CustomShellRenderer>();
#endif
});

方法2：优化TitleView布局 #

确保TitleView本身的布局属性设置正确，避免额外偏移：

<Shell.TitleView>
    <ContentView BackgroundColor="#YourTargetColor" 
                 HorizontalOptions="FillAndExpand" 
                 VerticalOptions="FillAndExpand"
                 Padding="0" Margin="0">
        <Label Text="页面标题" 
               HorizontalOptions="Center" 
               VerticalOptions="Center"/>
    </ContentView>
</Shell.TitleView>

通用排查点 #

• 检查AppShell.xaml中的全局Shell样式，确保没有设置额外的Padding或Margin属性。
• iOS端需确认Info.plist中未配置导航栏的全局样式干扰。

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