如何在MAUI Shell的TabbedPage中实现懒加载

当然可以实现仅在标签页被选中时才发起API调用加载数据，结合Community Toolkit MVVM，这里提供两种实用方案：

方案1：页面首次显示时触发加载（推荐） #

利用页面的Appearing事件，配合ViewModel的单次执行标记，实现首次进入标签页时才加载数据。

步骤1：给页面ViewModel添加加载逻辑 #

以MessagesViewModel为例，添加加载命令和已加载标记：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace NewScholarApp.ViewModels;

public partial class MessagesViewModel : ObservableObject
{
    // 标记数据是否已加载
    [ObservableProperty]
    private bool isDataLoaded;

    // 加载数据的命令
    [RelayCommand]
    private async Task LoadDataAsync()
    {
        // 已加载则直接返回，避免重复调用API
        if (IsDataLoaded) return;
        
        // 替换为你的API调用逻辑
        await ApiService.FetchMessagesAsync();
        
        // 标记数据已加载
        IsDataLoaded = true;
    }
}

步骤2：页面绑定Appearing事件到加载命令 #

在MessagesPage的XAML中，使用Community Toolkit的EventToCommandBehavior，将页面的Appearing事件绑定到ViewModel的LoadDataCommand：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:NewScholarApp.ViewModels"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="NewScholarApp.Views.MessagesPage">

    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior
            EventName="Appearing"
            Command="{Binding LoadDataCommand}" />
    </ContentPage.Behaviors>

    <!-- 页面布局内容 -->
</ContentPage>

注意事项 #

• 确保已安装CommunityToolkit.Maui NuGet包，并在MauiProgram.cs中注册：

  builder.UseMauiCommunityToolkit();
  

• 如果需要每次切换到标签页都刷新数据，删除IsDataLoaded的判断逻辑即可。

方案2：通过Shell监听导航事件触发加载 #

在Shell的代码后台，监听导航事件，当导航到目标页面时，主动触发ViewModel的加载命令。

在HomePage.xaml.cs中添加导航监听：

namespace NewScholarApp.Views;

public partial class HomePage : Shell
{
    public HomePage()
    {
        InitializeComponent();
        Navigated += OnShellNavigated;
    }

    private void OnShellNavigated(object sender, ShellNavigatedEventArgs e)
    {
        // 处理MessagesPage的加载
        if (e.Current.Location.ToString().Contains(nameof(MessagesPage)) &&
            CurrentItem?.CurrentItem?.BindingContext is MessagesViewModel messagesVm &&
            !messagesVm.IsDataLoaded)
        {
            messagesVm.LoadDataCommand.Execute(null);
        }

        // 处理DocumentsPage的加载
        if (e.Current.Location.ToString().Contains(nameof(DocumentsPage)) &&
            CurrentItem?.CurrentItem?.BindingContext is DocumentsViewModel docsVm &&
            !docsVm.IsDataLoaded)
        {
            docsVm.LoadDataCommand.Execute(null);
        }

        // 其他两个标签页同理添加判断逻辑
    }
}

这种方案适合统一在Shell层管理所有标签页的加载时机，无需在每个页面单独绑定事件。

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