.NET MAUI TabBar多次切换后ListView显示异常及返回后列表空但可点击问题求助

兄弟，我看了你遇到的这两个问题，都是.NET MAUI Shell Tab切换时常见的页面缓存、ListView布局复用和数据绑定生命周期的坑，给你分析下原因和具体的解决办法：

第一个问题：Tab多次切换后ListView行高异常变大 #

原因分析 #

Shell的TabBar默认会缓存页面，当你反复切换Tab时，CategoryPage不会被销毁重建，而是一直驻留在内存中。ListView的ViewCell采用复用机制，多次切换后可能出现布局约束混乱、ViewCell高度没有正确重置的情况；另外你当前的ViewCell里用了Grid，但没有明确限制高度，导致布局计算出现偏差。

解决办法 #

1. 给ListView明确设置行高
   在CategoryPage的ListView标签里加上固定行高或者启用自适应行高并确保布局可控：

   <!-- 方案1：固定行高，根据你的UI调整数值 -->
   <ListView x:Name="categoryListView" ItemsSource="{Binding Items}" ItemTapped="ListView_ItemTapped" 
             VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
             RowHeight="70">
   <!-- 方案2：启用自适应行高，同时确保ViewCell内的Grid不会无限扩展 -->
   <ListView x:Name="categoryListView" ItemsSource="{Binding Items}" ItemTapped="ListView_ItemTapped" 
             VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
             HasUnevenRows="True">
   

   如果用自适应行高，建议给Grid的RowDefinition设置MaxHeight，避免内容撑大行高：

   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" MaxHeight="30"/>
       <RowDefinition Height="Auto" MaxHeight="20"/>
   </Grid.RowDefinitions>
   

2. 在页面出现时重置ListView布局
   重写CategoryPage的OnAppearing方法，每次页面显示时强制刷新ListView布局：

   protected override void OnAppearing()
   {
       base.OnAppearing();
       // 强制刷新ListView布局，解决复用导致的高度异常
       categoryListView.InvalidateLayout();
   }
   

第二个问题：返回CategoryPage后列表为空但可点击 #

原因分析 #

这个问题核心是页面缓存导致的：从ItemPage返回时，CategoryPage是缓存的实例，不会重新调用构造函数和ApplyQueryAttributes方法，而你之前只在ApplyQueryAttributes里加载数据，导致页面显示时没有重新绑定最新数据；另外ObservableCollection的更新通知可能没正确触发UI刷新。

解决办法 #

1. 把数据加载逻辑移到OnAppearing中
   保存CategoryID作为类的成员变量，每次页面显示时重新加载数据，确保列表显示最新状态：

   // 在CategoryPage类里保留CategoryID字段
   int CategoryID = 0;
   
   protected override async void OnAppearing()
   {
       base.OnAppearing();
       if (CategoryID != 0)
       {
           // 重新获取数据并更新集合
           List<Item> items = await mDatabase.getItemsByCategoryAsync(CategoryID);
           Items.Clear();
           foreach (var item in items)
           {
               if (item.CategoryID == CategoryID)
               {
                   Items.Add(item);
               }
           }
           // 明确通知UI集合已更新
           OnPropertyChanged(nameof(Items));
       }
   }
   

2. 修复ApplyQueryAttributes中的更新通知
   原来的OnPropertyChanged()没有指定属性名，UI可能无法感知到Items集合的变化，修改成：

   public async void ApplyQueryAttributes(IDictionary<string, object> query)
   {
       var category = query["category"] as Category;
       CategoryID = category.ID;
       List<Item> items = await mDatabase.getItemsByCategoryAsync(category.ID);
       Items.Clear();
       foreach(var item in items)
       {
           if(item.CategoryID == category.ID)
           {
               Items.Add(item);
           }
       }
       // 明确指定更新Items属性
       OnPropertyChanged(nameof(Items));
   }
   

3. 优化删除操作的集合更新
   删除Item时直接从ObservableCollection中移除，不需要重新查询数据库，既高效又避免布局问题：

   private async void DeleteItem_Clicked(object sender, EventArgs e)
   {
       MenuItem menuItem = sender as MenuItem;
       ViewCell viewCell = menuItem.Parent as ViewCell;
       var item = viewCell.BindingContext as Item;
       string tmpItemName = item.Name;
       
       await mDatabase.DeleteItemAsync(item);
       Items.Remove(item); // 直接移除集合中的项
       await Toast.Make($"delete {tmpItemName} succeed.").Show();
   }
   

额外优化建议 #

• 尽量用MVVM的Command绑定替代事件处理（比如ItemTapped、MenuItem的Clicked），减少内存泄漏风险，也更符合.NET MAUI的最佳实践。
• 不建议随便禁用Shell的页面缓存，会影响性能，优先通过生命周期方法处理数据和布局问题。

备注：内容来源于stack exchange，提问作者KokLeong Lim