.NET MAUI 页面变得可见后处理事件

Question

我有一个ContentPage需要一些“繁重的工作”才能显示其数据。

因此，我的想法是ActivityIndicator在页面上显示可见的内容，直到数据准备好显示为止。

我正在尝试找出一个合适的事件来用于此目的。

我无法使用该Appearing事件，因为该事件发生在页面可见之前。

Loaded对于像或 之类的事件也是如此NavigatedTo，因为它们都会在页面可见之前触发。

所以，我的问题是：在页面加载并对用户可见后，是否有合适的事件来执行某些长时间运行的任务？

编辑：长时间运行的操作是async，但似乎页面上的数据绑定CollectionView是导致页面加载时感知滞后的原因，这就是为什么我想推迟数据绑定，直到页面加载随着旋转可见ActivityIndicator。

编辑2：我可能一直在寻找转移注意力的东西。UI 卡顿似乎是由模板中加载的某些 SVG 引起的CollectionView。不知道为什么，可能与 PNG 转换有关。不管怎样，我认为我实际上并不需要我最初寻找的活动类型。

Answer 1

选项1

我有时为此使用的一种方法如下。

繁重的工作（加载）进入 ViewModel，但在实例化 View 之前您就可以获得 LoadAsync() 方法的句柄。您可以将 ActivityIndi​​cator 绑定到 IsBusy 属性。加载所有内容后，您可以隐藏 ActivityIndi​​cator。

视图模型

private bool _isBusy;
public bool IsBusy
{
    get => _isBusy;
    set
    {
        _isBusy = value;
        OnPropertyChanged();
    }
}

public async Task LoadAsync()
{
    IsBusy = true;
    //Some long running operation 
    IsBusy = false;
}

看法

<ActivityIndicator IsRunning="{Binding IsBusy}"/>

导航

在实例化 View 和 ViewModel 的代码中，执行以下操作：

var viewModel = new ViewModel();
var loadTask = viewModel.LoadAsync();
await Navigation.PushAsync(new View(viewModel));
await loadTask;

或者简化为：

var viewModel = new ViewModel();
await Navigation.PushAsync(new View(viewModel));
await viewModel.LoadAsync();

选项 2：推迟数据绑定

不要在 XAML 中设置ItemsSource属性，而只能在代码隐藏中设置，如下所示：Binding

代码隐藏

private readonly ViewModel _vm;

public View MyView(ViewModel vm)
{
    InitializeComponent();
    BindingContext = _vm = vm;
    LoadAfterConstruction();
}

private async void LoadAfterConstruction()
{
    _vm.IsBusy = true;
    await _vm.LoadAsync();

    //only set the binding of the CollectionView after loading completed
    MyCollectionView.SetBinding(ItemsView.ItemsSourceProperty, nameof(MyCollection));

    _vm.IsBusy = false;
}

XAML：

<CollectionView x:Name="MyCollectionView" />

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/populate-data#populate-a-collectionview-with-data

无论哪种情况，您的视图都会变得可见，然后开始加载。

注意：此代码不是为了优化或 MVVM 正确性而编写的。

Answer 2

这是一个转移注意力的事情。

该问题与 无关CollectionView，而是与页面上呈现的 SVG 图像（图标）有关。

由于 SVG 具有较大的视图框， .NET MAUI 中的Resizetizer将它们转换为非常大的 PNG，这在渲染时会导致 UI 变得不稳定。

将属性设置BaseSize为更合理的元素图标大小<MauiImage />使.csprojUI 变得活泼。