.NET MAUI Shell+MVVM：多Tab复用页面并绑定不同数据源方案

针对你遇到的页面维护繁琐、切换卡顿问题，以下是一套兼容Shell的优化方案，核心是单页面复用+ViewModel单例预加载所有数据。

一、重构ViewModel：统一管理每日数据并预加载 #

将分散的每日集合改为按DayOfWeek索引的字典，初始化时一次性加载所有天数的数据，同时添加加载状态控制。

public class WeeklyRotaViewModel : ObservableObject
{
    // 存储所有天数的数据，Key为星期几
    public Dictionary<DayOfWeek, ObservableCollection<DailyData>> DailyDataCollections { get; } 
        = new Dictionary<DayOfWeek, ObservableCollection<DailyData>>();

    private bool _isLoading;
    public bool IsLoading
    {
        get => _isLoading;
        set => SetProperty(ref _isLoading, value);
    }

    public WeeklyRotaViewModel()
    {
        // 初始化每个星期几的空集合
        foreach (DayOfWeek day in Enum.GetValues(typeof(DayOfWeek)))
        {
            DailyDataCollections[day] = new ObservableCollection<DailyData>();
        }
        // 预加载所有数据
        _ = LoadAllDailyDataAsync();
    }

    private async Task LoadAllDailyDataAsync()
    {
        IsLoading = true;
        try
        {
            foreach (DayOfWeek day in Enum.GetValues(typeof(DayOfWeek)))
            {
                // 替换为你的实际数据获取逻辑
                var dayData = await FetchDailyDataFromApi(day);
                foreach (var item in dayData)
                {
                    DailyDataCollections[day].Add(item);
                }
            }
        }
        catch (Exception ex)
        {
            // 异常处理逻辑，比如弹出提示
        }
        finally
        {
            IsLoading = false;
        }
    }

    // 模拟数据接口，替换为你的真实实现
    private Task<List<DailyData>> FetchDailyDataFromApi(DayOfWeek day)
    {
        return Task.FromResult(new List<DailyData>());
    }
}

二、创建单个复用页面：WeeklyRotaDayPage #

只维护一个页面，通过绑定属性接收当前星期几，自动关联对应的数据集合。

XAML布局（WeeklyRotaDayPage.xaml） #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Pages.WeeklyRotaDayPage"
             x:Name="DayPage">
    <!-- 初始加载指示器 -->
    <ActivityIndicator IsRunning="{Binding IsLoading}" 
                       IsVisible="{Binding IsLoading}"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
    <!-- 数据展示区域，绑定当前天的集合 -->
    <CollectionView ItemsSource="{Binding DailyDataCollections[{Binding Source={x:Reference DayPage}, Path=CurrentDay}]}"
                    IsVisible="{Binding IsLoading, Converter={StaticResource InverseBooleanConverter}}">
        <!-- 自定义数据项模板 -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <!-- 你的数据项布局，示例： -->
                <Label Text="{Binding YourDataProperty}"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

后台代码（WeeklyRotaDayPage.xaml.cs） #

public partial class WeeklyRotaDayPage : ContentPage
{
    // 定义绑定属性，传递当前星期几
    public static readonly BindableProperty CurrentDayProperty =
        BindableProperty.Create(nameof(CurrentDay), typeof(DayOfWeek), typeof(WeeklyRotaDayPage));

    public DayOfWeek CurrentDay
    {
        get => (DayOfWeek)GetValue(CurrentDayProperty);
        set => SetValue(CurrentDayProperty, value);
    }

    public WeeklyRotaDayPage(WeeklyRotaViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;
    }
}

注：需要添加InverseBooleanConverter用于控制CollectionView的显示/隐藏，可自行实现或使用MAUI社区工具包中的转换器。

三、Shell中动态生成Tab项 #

通过绑定数组或代码后台生成7个ShellContent，避免手动重复编写。

方式1：XAML绑定生成 #

在AppShell.xaml中直接绑定星期几数组：

<FlyoutItem Title="Weekly Rota" Icon="team.png">
    <Tab>
        <Tab.ItemsSource>
            <x:Array Type="{x:Type DayOfWeek}">
                <DayOfWeek>Monday</DayOfWeek>
                <DayOfWeek>Tuesday</DayOfWeek>
                <DayOfWeek>Wednesday</DayOfWeek>
                <DayOfWeek>Thursday</DayOfWeek>
                <DayOfWeek>Friday</DayOfWeek>
                <DayOfWeek>Saturday</DayOfWeek>
                <DayOfWeek>Sunday</DayOfWeek>
            </x:Array>
        </Tab.ItemsSource>
        <Tab.ItemTemplate>
            <DataTemplate>
                <ShellContent Title="{Binding}" Shell.TabBarIsVisible="False">
                    <pages:WeeklyRotaDayPage CurrentDay="{Binding}" />
                </ShellContent>
            </DataTemplate>
        </Tab.ItemTemplate>
    </Tab>
</FlyoutItem>

方式2：代码后台生成 #

如果XAML绑定存在兼容性问题，可在AppShell构造函数中动态添加：

public AppShell(WeeklyRotaViewModel viewModel)
{
    InitializeComponent();

    // 找到目标FlyoutItem和Tab
    var weeklyFlyout = this.Items.OfType<FlyoutItem>().First(f => f.Title == "Weekly Rota");
    var weeklyTab = weeklyFlyout.Items.OfType<Tab>().First();

    // 遍历星期几生成ShellContent
    foreach (DayOfWeek day in Enum.GetValues(typeof(DayOfWeek)))
    {
        weeklyTab.Items.Add(new ShellContent
        {
            Title = day.ToString(),
            Content = new WeeklyRotaDayPage(viewModel) { CurrentDay = day },
            ShellTabBarIsVisible = false
        });
    }
}

四、确保ViewModel单例 #

在MauiProgram.cs中将ViewModel注册为单例，避免切换Tab时重复实例化：

builder.Services.AddSingleton<WeeklyRotaViewModel>();

方案优势 #

1. 页面复用：仅维护一个页面，修改布局无需同步7个文件，降低出错概率。
2. 无切换卡顿：ViewModel初始化时预加载所有数据，Tab切换直接复用已加载内容。
3. 兼容Shell：完全基于MAUI Shell实现，保留Shell的导航、Flyout等特性。
4. 友好加载体验：通过加载指示器提示用户初始加载状态，符合需求预期。

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