如何解决MAUI应用Shell导航与模态窗口标题重叠问题？

核心原因 #

Shell导航到子页面时，导航栏自动添加返回按钮，挤占标题布局空间导致标题右移；但模态窗口的标题布局基于导航栏原始默认位置计算，未适配返回按钮存在时的偏移，最终造成标题重叠。

解决方案思路 #

1. 让模态窗口标题布局适配Shell导航栏的当前状态（是否存在返回按钮）
2. 自定义Shell导航栏或模态窗口标题栏，统一两者的标题位置规则
3. 利用MAUI的布局绑定或Shell导航扩展修正偏移

具体实现方案 #

方案一：传递Shell导航栏偏移量给模态窗口 #

在弹出模态窗口前，获取当前页面返回按钮的宽度，将其作为偏移量传递给模态窗口，调整模态标题的左侧边距。

代码片段（父页面中打开模态窗口）：

private async Task OpenModal()
{
    double titleOffset = 0;
    // 获取Shell导航栏的返回按钮（需根据实际Shell布局调整控件名称）
    if (Shell.Current.CurrentPage.FindByName<Button>("BackBtn") is Button backBtn)
    {
        // 等待布局完成后获取按钮宽度
        await Task.Delay(100);
        titleOffset = backBtn.Width;
    }

    var modalPage = new ModalPage();
    modalPage.TitleLeftOffset = titleOffset;
    await Navigation.PushModalAsync(modalPage);
}

模态窗口XAML及后台处理：

<!-- ModalPage.xaml -->
<ContentPage.TitleView>
    <Label Text="模态窗口标题" 
           Margin="{Binding TitleLeftOffset, Converter={StaticResource DoubleToThickness}}" />
</ContentPage.TitleView>

偏移量转换器：

public class DoubleToThickness : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is double offset ? new Thickness(offset, 0, 0, 0) : new Thickness(0);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => throw new NotImplementedException();
}

方案二：统一Shell与模态窗口的标题布局 #

自定义Shell导航栏模板，固定标题的对齐规则（比如居中），让模态窗口标题采用相同布局，避免因返回按钮导致的位置差异。

代码片段（AppShell.xaml自定义导航栏）：

<Shell.TitleView>
    <Grid HorizontalOptions="FillAndExpand">
        <Button x:Name="BackBtn" Text="←" IsVisible="{Binding HasBackButton}" 
                Command="{Binding GoBackCommand}" />
        <Label Text="{Binding CurrentTitle}" HorizontalOptions="Center" 
               VerticalOptions="Center" FontSize="Title" />
    </Grid>
</Shell.TitleView>

Shell后台逻辑：

public partial class AppShell : Shell
{
    public bool HasBackButton { get; set; }
    public string CurrentTitle { get; set; }

    public AppShell()
    {
        InitializeComponent();
        BindingContext = this;
        Navigated += OnShellNavigated;
    }

    private void OnShellNavigated(object sender, ShellNavigatedEventArgs e)
    {
        // 判断是否为根页面，控制返回按钮可见性
        HasBackButton = !e.Current.Location.OriginalString.EndsWith("//MainPage");
        CurrentTitle = e.CurrentPage.Title;
    }

    public ICommand GoBackCommand => new Command(() => Shell.Current.GoToAsync(".."));
}

模态窗口直接沿用居中标题布局：

<ContentPage.TitleView>
    <Label Text="模态窗口标题" HorizontalOptions="Center" VerticalOptions="Center" />
</ContentPage.TitleView>

方案三：用Shell路由打开模态窗口 #

将模态页面注册为Shell路由，通过Shell导航以模态方式打开，让模态窗口自动继承Shell导航栏的布局规则。

代码片段（AppShell.xaml注册路由）：

<ShellContent Route="ModalPage" ContentTemplate="{DataTemplate local:ModalPage}" />

打开模态窗口的代码：

await Shell.Current.GoToAsync("//ModalPage", true); 
// 第二个参数true表示以模态形式打开页面

注意事项 #

• 不同平台的Shell导航栏默认布局存在差异，需在iOS、Android等平台分别测试
• 若需更精细的平台级控制，可通过自定义渲染器调整导航栏布局，但会增加代码复杂度

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