.NET MAUI安卓端切换标签时导航栏标题及背景色更新延迟问题

问题描述 #

将Xamarin Forms项目迁移至.NET MAUI后，安卓设备上切换TabbedPage标签时出现导航栏标题和背景色更新延迟的问题，该问题在Xamarin Forms中未出现。具体表现为：

• 点击标签2时，标签栏背景色切换为标签2对应颜色，但导航栏标题和背景色仍显示标签1的内容
• 点击标签3时，导航栏才更新为标签2的对应值，而非标签3的

相关代码 #

XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:prism="http://prismlibrary.com"
            prism:ViewModelLocator.AutowireViewModel="Forced"
            BarBackgroundColor="{StaticResource DemoColor}"
            x:Class="Demo.Views.HomeScreen"
            BackgroundColor="White"
            Title="Demo Project">
    <TabbedPage.Children>
    </TabbedPage.Children>
</TabbedPage>

C#代码 #

public HomeScreen()
{
    InitializeComponent();
    CurrentPageChanged += HomeScreen_CurrentPageChanged;
}

private void HomeScreen_CurrentPageChanged(object sender, EventArgs e)
{
    ChangeTabColor();
}

public void ChangeTabColor()
{
    try
    {
        if (CurrentPage != null)
        {
            if (CurrentPage is Tab.Tab1)
            {
                ((NavigationPage)Parent).Title = Title = Constant.Tab1;
                ((NavigationPage)Parent).BarBackgroundColor =(Color)Application.Current.Resources["demoColor"];
                BarBackgroundColor = DeviceInfo.Platform == DevicePlatform.iOS ? Colors.White : (Color)Application.Current.Resources["demoColor"];
            }
            else if (CurrentPage is Tab.tab2)
            {
                ((NavigationPage)Parent).Title = Title = Constant.Tab2;                
                ((NavigationPage)Parent).BarBackgroundColor =(Color)Application.Current.Resources["demoColor2"];                            
                BarBackgroundColor = DeviceInfo.Platform == DevicePlatform.iOS ? Colors.White : (Color)Application.Current.Resources["demoColor2"];
            }
            else
            {
                ((NavigationPage)Parent).Title = Title = Constant.Tab3;                            
                ((NavigationPage)Parent).BarBackgroundColor = (Color)Application.Current.Resources["demoColor3"];                             
                BarBackgroundColor = DeviceInfo.Platform == DevicePlatform.iOS ? Colors.White :  (Color)Application.Current.Resources["demoColor3"];
            }
        }
    }
    catch { }
}

解决方案 #

方法1：强制主线程更新UI #

.NET MAUI中所有UI操作需在主线程完成，安卓端可能存在事件触发滞后的情况，将更新代码包裹在MainThread.BeginInvokeOnMainThread中强制立即执行：

public void ChangeTabColor()
{
    try
    {
        if (CurrentPage == null) return;
        
        MainThread.BeginInvokeOnMainThread(() =>
        {
            var navigationPage = Parent as NavigationPage;
            if (navigationPage == null) return;

            Color navBarColor;
            string tabTitle;

            if (CurrentPage is Tab.Tab1)
            {
                tabTitle = Constant.Tab1;
                navBarColor = (Color)Application.Current.Resources["demoColor"];
            }
            else if (CurrentPage is Tab.tab2)
            {
                tabTitle = Constant.Tab2;
                navBarColor = (Color)Application.Current.Resources["demoColor2"];
            }
            else
            {
                tabTitle = Constant.Tab3;
                navBarColor = (Color)Application.Current.Resources["demoColor3"];
            }

            navigationPage.Title = Title = tabTitle;
            navigationPage.BarBackgroundColor = navBarColor;
            BarBackgroundColor = DeviceInfo.Platform == DevicePlatform.iOS ? Colors.White : navBarColor;
        });
    }
    catch (Exception ex)
    {
        // 可添加日志记录
    }
}

方法2：改用SelectedIndexChanged事件 #

安卓端CurrentPageChanged事件触发时机可能滞后于标签切换，改用SelectedIndexChanged事件基于索引判断页面，更新更及时：

public HomeScreen()
{
    InitializeComponent();
    SelectedIndexChanged += HomeScreen_SelectedIndexChanged;
}

private void HomeScreen_SelectedIndexChanged(object sender, EventArgs e)
{
    ChangeTabColorByIndex();
}

public void ChangeTabColorByIndex()
{
    try
    {
        var navigationPage = Parent as NavigationPage;
        if (navigationPage == null) return;

        Color navBarColor;
        string tabTitle;

        switch (SelectedIndex)
        {
            case 0:
                tabTitle = Constant.Tab1;
                navBarColor = (Color)Application.Current.Resources["demoColor"];
                break;
            case 1:
                tabTitle = Constant.Tab2;
                navBarColor = (Color)Application.Current.Resources["demoColor2"];
                break;
            case 2:
                tabTitle = Constant.Tab3;
                navBarColor = (Color)Application.Current.Resources["demoColor3"];
                break;
            default:
                return;
        }

        MainThread.BeginInvokeOnMainThread(() =>
        {
            navigationPage.Title = Title = tabTitle;
            navigationPage.BarBackgroundColor = navBarColor;
            BarBackgroundColor = DeviceInfo.Platform == DevicePlatform.iOS ? Colors.White : navBarColor;
        });
    }
    catch (Exception ex)
    {
        // 可添加日志记录
    }
}

方法3：数据绑定（推荐） #

摆脱手动事件驱动，利用MVVM数据绑定自动同步导航栏属性。在每个标签页面的ViewModel中定义标题和颜色属性：

// Tab1 ViewModel示例
public class Tab1ViewModel : BindableBase
{
    public string PageTitle => Constant.Tab1;
    public Color NavBarColor => (Color)Application.Current.Resources["demoColor"];
}

// 同理实现Tab2ViewModel、Tab3ViewModel

在包裹TabbedPage的NavigationPage中绑定到当前页面的ViewModel属性：

<NavigationPage Title="{Binding CurrentPage.BindingContext.PageTitle}"
                BarBackgroundColor="{Binding CurrentPage.BindingContext.NavBarColor}">
    <x:Arguments>
        <views:HomeScreen />
    </x:Arguments>
</NavigationPage>

这种方式更符合MAUI设计理念，避免异步更新带来的延迟问题。

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