点击按钮后页面加载过程中如何调用Activity Indicator？

要解决页面加载慢时的加载状态提示问题，核心是把耗时的UI创建逻辑异步化，同时在加载过程中显示Activity Indicator，具体可以分两步实现：

1. 在当前页面添加加载指示器并修改点击事件 #

首先在触发跳转的页面的XAML中添加Activity Indicator：

<!-- 放到页面布局的居中位置，覆盖显示 -->
<ActivityIndicator x:Name="LoadingIndicator" 
                   IsRunning="False" 
                   IsVisible="False" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center"
                   Color="#007AFF" />

然后修改按钮点击事件的代码，先显示加载状态，再异步处理页面初始化和跳转：

private async void ProductTypeButton_Clicked(object sender, EventArgs e)
{
    // 开启加载指示器
    LoadingIndicator.IsVisible = true;
    LoadingIndicator.IsRunning = true;

    try
    {
        // 先实例化页面，构造函数只做基础初始化
        var productPage = new ProductPage(_ViewModel);
        // 等待页面完成耗时的控件创建逻辑
        await productPage.InitializeAsync();
        // 跳转页面
        await Navigation.PushAsync(productPage);
    }
    finally
    {
        // 无论成功失败，都关闭加载指示器
        LoadingIndicator.IsVisible = false;
        LoadingIndicator.IsRunning = false;
    }
}

2. 重构ProductPage的耗时逻辑 #

把原来在ProductPage构造函数里创建大量Label的逻辑，移到异步方法中，避免阻塞UI线程：

首先在ProductPage的XAML里添加页面内的加载指示器（可选，让用户在新页面也能看到加载状态）：

<Grid>
    <!-- 用来承载动态Label的容器 -->
    <StackLayout x:Name="ContentContainer" />
    <!-- 页面内的加载指示器，覆盖在内容上方 -->
    <ActivityIndicator x:Name="PageLoader" 
                       IsRunning="True" 
                       IsVisible="True" 
                       HorizontalOptions="Center" 
                       VerticalOptions="Center" />
</Grid>

然后修改ProductPage的后台代码：

public partial class ProductPage : ContentPage
{
    private readonly YourViewModelType _viewModel;

    public ProductPage(YourViewModelType viewModel)
    {
        InitializeComponent();
        _viewModel = viewModel;
        BindingContext = _viewModel;
        // 构造函数只做基础初始化，不做耗时操作
    }

    public async Task InitializeAsync()
    {
        try
        {
            // 把耗时的UI创建逻辑放到异步任务中
            await Task.Run(() =>
            {
                // 创建UI控件必须在主线程执行，用Dispatcher切换回主线程
                Dispatcher.Dispatch(() =>
                {
                    // 示例：循环创建大量Label
                    for (int i = 0; i < 1000; i++)
                    {
                        var label = new Label
                        {
                            Text = $"数据条目 {i}",
                            Margin = new Thickness(4, 2)
                        };
                        ContentContainer.Children.Add(label);
                    }
                });
            });
        }
        finally
        {
            // 加载完成后隐藏页面内的指示器
            PageLoader.IsVisible = false;
            PageLoader.IsRunning = false;
        }
    }
}

关键注意事项 #

• 不要在构造函数里做耗时操作：构造函数会阻塞UI线程，导致页面跳转卡顿，所有耗时逻辑必须放到异步方法中
• UI操作必须在主线程：创建Label这类UI控件只能在主线程执行，所以用Dispatcher.Dispatch（MAUI）或Device.BeginInvokeOnMainThread（Xamarin）切换线程
• 用finally确保指示器关闭：无论加载成功还是抛出异常，都要隐藏加载指示器，避免出现指示器一直显示的情况

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