Xamarin.Forms自定义LoadingIndicator页面引发OnAppearing重复触发的解决方案咨询

你遇到的这个问题其实是Xamarin.Forms的默认行为：当你用PushModalAsync弹出模态页面时，原页面会失去焦点（Android上对应Activity进入OnPause状态）；当模态页面被PopModalAsync移除后，原页面会重新获得焦点（Activity进入OnResume），从而触发OnAppearing方法。

下面给你几个通用的解决方案，不用逐个页面修改代码：

方案1：用页面覆盖层替代模态弹窗（推荐） #

放弃PushModalAsync的方式，把LoadingIndicator做成一个全局覆盖层，直接添加到当前页面的最上层。这样既保留半透明效果，又不会触发页面的OnAppearing，因为页面从未失焦。

实现步骤： #

1. 创建一个静态的LoadingService类，负责全局管理Loading的显示和隐藏：

public static class LoadingService
{
    private static LoadingIndicator _currentLoading;

    public static void ShowLoading()
    {
        if (_currentLoading != null) return;

        // 初始化你的LoadingIndicator，设置半透明背景
        _currentLoading = new LoadingIndicator
        {
            BackgroundColor = Color.Black.WithAlpha(0.5),
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand
        };

        // 获取当前活跃的页面
        var currentPage = Application.Current.MainPage.Navigation.NavigationStack.LastOrDefault() 
                          ?? Application.Current.MainPage;

        // 将Loading添加到当前页面的绝对布局中
        if (currentPage.Content is AbsoluteLayout absoluteLayout)
        {
            absoluteLayout.Children.Add(_currentLoading, 
                new Rectangle(0, 0, 1, 1), 
                AbsoluteLayoutFlags.All);
        }
        else
        {
            // 如果页面内容不是绝对布局，先包装成绝对布局
            var wrapperLayout = new AbsoluteLayout();
            wrapperLayout.Children.Add(currentPage.Content, 
                new Rectangle(0, 0, 1, 1), 
                AbsoluteLayoutFlags.All);
            wrapperLayout.Children.Add(_currentLoading, 
                new Rectangle(0, 0, 1, 1), 
                AbsoluteLayoutFlags.All);
            currentPage.Content = wrapperLayout;
        }
    }

    public static void HideLoading()
    {
        if (_currentLoading == null) return;

        var currentPage = Application.Current.MainPage.Navigation.NavigationStack.LastOrDefault() 
                          ?? Application.Current.MainPage;

        if (currentPage.Content is AbsoluteLayout absoluteLayout)
        {
            absoluteLayout.Children.Remove(_currentLoading);
            // 如果之前包装了页面内容，恢复原内容
            if (absoluteLayout.Children.Count == 1)
            {
                currentPage.Content = absoluteLayout.Children[0];
            }
        }

        _currentLoading = null;
    }
}

2. 调用方式替换成：

// 显示Loading
LoadingService.ShowLoading();

// 隐藏Loading
LoadingService.HideLoading();

方案2：基于BasePage过滤OnAppearing触发 #

如果一定要保留PushModalAsync的方式，可以创建一个所有页面都继承的BasePage，在里面判断是否需要跳过OnAppearing的业务逻辑。

实现步骤： #

1. 创建BasePage类：

public class BasePage : ContentPage
{
    // 标记是否跳过下一次OnAppearing触发
    public bool SkipNextOnAppearing { get; set; }

    protected override void OnAppearing()
    {
        if (SkipNextOnAppearing)
        {
            SkipNextOnAppearing = false;
            return; // 跳过业务逻辑执行
        }
        base.OnAppearing();
        // 这里可以放所有页面通用的OnAppearing逻辑，子类也可以重写这个方法
    }
}

2. 创建Navigation扩展方法，自动标记跳过状态：

public static class NavigationExtensions
{
    public static async Task PushLoadingModalAsync(this INavigation navigation, LoadingIndicator loading)
    {
        var currentPage = navigation.NavigationStack.LastOrDefault() as BasePage;
        if (currentPage != null)
        {
            currentPage.SkipNextOnAppearing = true;
        }
        
        await navigation.PushModalAsync(loading, false);
    }

    public static async Task PopLoadingModalAsync(this INavigation navigation)
    {
        await navigation.PopModalAsync(false);
    }
}

3. 调用方式替换成：

var loading = new LoadingIndicator();
await MyApp.CurrentAppInstance.MainPage.Navigation.PushLoadingModalAsync(loading);

// 隐藏时
await MyApp.CurrentAppInstance.MainPage.Navigation.PopLoadingModalAsync();

方案3：Android端自定义Renderer将模态转为Dialog #

针对Android平台，你可以自定义LoadingIndicator的Renderer，把它渲染成一个Dialog而不是新的Activity。这样原页面的Activity不会进入OnPause，也就不会触发OnAppearing。

实现步骤： #

在Android项目中创建Renderer：

[assembly: ExportRenderer(typeof(LoadingIndicator), typeof(LoadingIndicatorRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class LoadingIndicatorRenderer : PageRenderer
    {
        private Dialog _loadingDialog;

        protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                // 创建自定义Dialog
                _loadingDialog = new Dialog(Context);
                _loadingDialog.RequestWindowFeature((int)WindowFeatures.NoTitle);
                _loadingDialog.SetContentView(LayoutInflater.FromContext(Context).Inflate(Resource.Layout.LoadingLayout, null));
                
                // 设置半透明背景
                _loadingDialog.Window.SetBackgroundDrawable(new ColorDrawable(Android.Graphics.Color.Argb(128, 0, 0, 0)));
                _loadingDialog.Window.SetLayout(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);
                
                _loadingDialog.Show();

                // 监听页面的Disappearing事件，关闭Dialog
                e.NewElement.Disappearing += (s, args) =>
                {
                    _loadingDialog?.Dismiss();
                    _loadingDialog = null;
                };
            }
        }
    }
}

然后在Android项目中创建LoadingLayout.axml布局文件，定义你的LoadingUI即可。这种方式不需要修改共享代码，只需要Android端的自定义Renderer。

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