Maui - Windows平台TabbedPage当前页指示器异常问题求助

问题描述 #

我有一个包含Page 1和Page 2的TabbedPage：

• 首次打开时，Page 1正常显示，指示器仅在Page 1标题下方；切换到Page 2时，页面和指示器显示也正常。
• 但从Page 2页面关闭该TabbedPage，重新打开新实例后，Page 1正常显示，但Page 1和Page 2的标题下方同时出现了指示器。

问题截图：

复现代码 #

MyTabbedPage代码 #

namespace MauiTestApp;

public class MyTabbedPage : TabbedPage
{
    public MyTabbedPage()
    {
        ContentPage page1 = new ContentPage();
        page1.Title = "Page 1";

        ContentPage page2 = new ContentPage();
        page2.Title = "Page 2";

        this.Children.Add(page1);
        this.Children.Add(page2);

        ToolbarItems.Add(new ToolbarItem("Back", null, async () =>
        {
            await Navigation.PopModalAsync(true);
        }));
    }
}

启动页（StartPage）代码 #

namespace MauiTestApp;

public class StartPage : ContentPage
{
    public StartPage()
    {
        Button tabbedPageButton = new Button();
        tabbedPageButton.Text = "Open Tabbed Page";
        tabbedPageButton.Clicked += TabbedPageButton_Clicked;

        Content = new VerticalStackLayout
        {
            Children = { tabbedPageButton }
        };
    }

    private async void TabbedPageButton_Clicked(object? sender, EventArgs e)
    {
        await Navigation.PushModalAsync(new NavigationPage(new MyTabbedPage()));
    }
}

临时解决办法 #

办法1：强制重置选中状态并刷新布局 #

在MyTabbedPage中重写OnAppearing方法，通过切换选中页再切回的方式强制刷新指示器状态：

protected override void OnAppearing()
{
    base.OnAppearing();
    // 临时切换选中页触发指示器刷新
    var originalIndex = SelectedIndex;
    SelectedIndex = originalIndex == 0 ? 1 : 0;
    SelectedIndex = originalIndex;
    // 强制布局更新
    ForceLayout();
}

办法2：移除不必要的NavigationPage嵌套 #

当前代码将TabbedPage嵌套在NavigationPage中弹出，而TabbedPage本身支持导航操作，可直接弹出TabbedPage：
修改StartPage的点击事件代码：

private async void TabbedPageButton_Clicked(object? sender, EventArgs e)
{
    await Navigation.PushModalAsync(new MyTabbedPage());
}

此方法能避免嵌套导航导致的控件状态残留问题，同时保留原有的返回按钮功能。

办法3：平台特定样式重置（针对Android/iOS） #

如果上述方法无效，可针对平台编写特定代码重置TabBar状态：

• Android：在MainActivity中或使用自定义渲染器，获取TabLayout并重置指示器状态；
• iOS：使用自定义渲染器重置UITabBar的选中状态样式。

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