如何在.NET MAUI Shell单ViewModel内实现长列表标签页分组？

针对你遇到的四个问题，下面给出一套可行的实现方案，全程在单个ViewModel和ContentPage内完成，无需依赖Shell导航Tabs或TabbedPage：

核心思路 #

放弃Shell导航Tabs和TabbedPage，在当前Shell ContentPage内自定义标签栏+可切换的列表区域，同时将侧边摘要面板设为固定布局。所有分类列表共用同一个ViewModel，通过切换ViewModel内的当前分类数据来更新列表，完全规避导航逻辑。

1. 解决Shell与TabbedPage的兼容性问题 #

直接弃用TabbedPage，采用自定义标签栏+视图复用的方式。用HorizontalStackLayout或第三方标签组件（如CommunityToolkit的TabView）实现顶部标签切换，所有列表内容在同一个页面容器内更新，完全不涉及Shell导航冲突。

2. 单ViewModel内保留共用固定视图（侧边摘要面板） #

通过Grid布局将页面划分为固定区域和动态区域：

• 用Grid的列定义拆分布局：比如ColumnDefinitions="*, 200"，右侧200宽度的列作为固定的侧边摘要面板，绑定ViewModel内的已选项目集合，永远保持可见，不随标签切换变化。
• 左侧列放置自定义标签栏+列表区域，列表的ItemsSource绑定ViewModel的CurrentCategoryItems属性，切换标签时仅更新该属性的数据源，不重建页面或导航。

示例XAML结构：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>

    <!-- 左侧：标签栏+列表区域 -->
    <VerticalStackLayout Grid.Column="0">
        <!-- 自定义标签栏 -->
        <HorizontalStackLayout Spacing="8" Padding="16">
            <Button Text="分类A" Command="{Binding SwitchCategoryCommand}" CommandParameter="CategoryA" 
                    BackgroundColor="{Binding CurrentCategory == 'CategoryA' ? Primary : Secondary}"/>
            <Button Text="分类B" Command="{Binding SwitchCategoryCommand}" CommandParameter="CategoryB" 
                    BackgroundColor="{Binding CurrentCategory == 'CategoryB' ? Primary : Secondary}"/>
            <!-- 更多标签... -->
        </HorizontalStackLayout>

        <!-- 可切换的列表 -->
        <CollectionView ItemsSource="{Binding CurrentCategoryItems}"
                        IsVirtualizing="True"
                        CachingStrategy="RecycleElement">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="local:ItemModel">
                    <!-- 列表项布局 -->
                    <CheckBox IsChecked="{Binding IsSelected}" />
                    <Label Text="{Binding Name}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
            <!-- 加载指示器覆盖层 -->
            <CollectionView.EmptyView>
                <ActivityIndicator IsRunning="{Binding IsBusy}" IsVisible="{Binding IsBusy}"/>
            </CollectionView.EmptyView>
        </CollectionView>
    </VerticalStackLayout>

    <!-- 右侧：固定侧边摘要面板 -->
    <Frame Grid.Column="1" BackgroundColor="LightGray">
        <StackLayout>
            <Label Text="已选项目"/>
            <CollectionView ItemsSource="{Binding SelectedItems}">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="local:ItemModel">
                        <Label Text="{Binding Name}"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </Frame>
</Grid>

3. 替代Expander实现固定标题的分组 #

Expander的标题与内容联动的特性无法满足固定标题的需求，直接用上述自定义标签栏替代：标签栏固定在页面顶部，切换时仅更新下方列表，标题（标签）永远保持在屏幕可见区域，不会随列表滚动或展开/折叠移动。

4. 解决自定义标签切换的性能卡顿问题 #

通过以下几点优化彻底避免主线程阻塞：

• 预加载+异步加载数据：在ViewModel初始化时，用后台线程预加载所有分类的数据，存储到字典中，切换标签时直接读取缓存数据；若数据量过大无法预加载，切换时在Task.Run内异步加载数据，完成后通过MainThread.BeginInvokeOnMainThread更新UI。
• 复用列表控件：始终使用同一个CollectionView，仅更新其ItemsSource，避免每次切换都重建列表控件。
• 开启CollectionView虚拟化：确保IsVirtualizing="True"且CachingStrategy="RecycleElement"，减少UI元素的创建和销毁开销。
• 简化ItemTemplate：避免复杂嵌套布局，使用编译绑定（x:DataType）提升绑定性能。

ViewModel关键代码示例：

public class MainViewModel : ObservableObject
{
    private readonly Dictionary<string, ObservableCollection<ItemModel>> _categoryItemsCache = new();
    private string _currentCategory;
    private ObservableCollection<ItemModel> _currentCategoryItems;
    private bool _isBusy;

    public ObservableCollection<ItemModel> SelectedItems { get; } = new();
    public ICommand SwitchCategoryCommand { get; }

    public string CurrentCategory
    {
        get => _currentCategory;
        set => SetProperty(ref _currentCategory, value);
    }

    public ObservableCollection<ItemModel> CurrentCategoryItems
    {
        get => _currentCategoryItems;
        set => SetProperty(ref _currentCategoryItems, value);
    }

    public bool IsBusy
    {
        get => _isBusy;
        set => SetProperty(ref _isBusy, value);
    }

    public MainViewModel()
    {
        SwitchCategoryCommand = new AsyncRelayCommand<string>(SwitchCategoryAsync);
        // 预加载所有分类数据（后台线程）
        Task.Run(PreloadAllCategoriesAsync);
    }

    private async Task PreloadAllCategoriesAsync()
    {
        // 模拟从API/数据库加载数据
        var categories = new[] { "CategoryA", "CategoryB", "CategoryC" };
        foreach (var category in categories)
        {
            var items = await LoadItemsForCategoryAsync(category);
            _categoryItemsCache[category] = new ObservableCollection<ItemModel>(items);
        }
    }

    private async Task SwitchCategoryAsync(string category)
    {
        if (_currentCategory == category) return;

        IsBusy = true;
        CurrentCategory = category;

        // 优先从缓存取数据，无缓存则异步加载
        if (_categoryItemsCache.TryGetValue(category, out var cachedItems))
        {
            CurrentCategoryItems = cachedItems;
        }
        else
        {
            var items = await LoadItemsForCategoryAsync(category);
            var itemCollection = new ObservableCollection<ItemModel>(items);
            _categoryItemsCache[category] = itemCollection;
            CurrentCategoryItems = itemCollection;
        }

        IsBusy = false;
    }

    private async Task<List<ItemModel>> LoadItemsForCategoryAsync(string category)
    {
        // 模拟异步加载延迟
        await Task.Delay(500);
        return Enumerable.Range(1, 1000).Select(i => new ItemModel { Name = $"{category} Item {i}" }).ToList();
    }
}

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