.NET MAUI CollectionView初始加载卡顿问题求助

问题背景 #

正在将Xamarin.Forms应用迁移至.NET MAUI，聚焦Android平台适配。原使用ScrollView嵌套Grid实现的TileView（图片+文字块）存在严重卡顿，改用CollectionView重构后，卡顿问题仍未解决。

核心代码实现 #

CollectionView构建代码 #

collectionView = new CollectionView();

collectionView.BindingContext = tileViewModel;
BindingContext = tileViewModel;
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Tiles");
collectionView.SetAppThemeColor(BackgroundColorProperty, Colors.White, (Color)App.Current.Resources["GBDarkGrey"]);
ContentView cw = new ContentView();
cw.Padding = new Thickness(10, 10, 10, 10);
var layout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical) { HorizontalItemSpacing = 5, VerticalItemSpacing = 5};
collectionView.ItemsLayout = layout;
collectionView.ItemTemplate = new DataTemplate(() => {
 
    Grid grid = new Grid();
    grid.RowSpacing = 5;
    grid.AddRowDefinition(new RowDefinition { Height = GridLength.Auto});
    grid.AddRowDefinition(new RowDefinition { Height = GridLength.Auto});
               
    Image image = new Image();
    var width = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;
 
    image.WidthRequest = width * 0.25;
 
    image.SetBinding(Image.SourceProperty, "ImageSource", BindingMode.OneTime);
 
    Label text = new Label
    {
        FontSize = 20,
        LineBreakMode = LineBreakMode.WordWrap,
        VerticalOptions = LayoutOptions.Start,
        HorizontalOptions = LayoutOptions.Center,
        HorizontalTextAlignment = TextAlignment.Center
    };
 
    text.SetBinding(Label.TextProperty, "Text", BindingMode.OneTime);
               
    Border border = new Border();
    CompressedLayout.SetIsHeadless(image, true);
    CompressedLayout.SetIsHeadless(text, true);
 
    grid.Add(image, 0, 0);
    grid.Add(text, 0, 1);
 
    border.BackgroundColor = Color.FromRgba(0, 0, 0, 0);
    border.Padding = 8;
    border.StrokeThickness = 2;
    border.StrokeShape = new RoundRectangle { CornerRadius = 3 };
 
    var brush = new SolidColorBrush();
    brush.Color = Color.FromRgb(0, 255, 0);
 
    border.Stroke = brush;
    border.Content = grid;
 
    CompressedLayout.SetIsHeadless(border, true);

    return border;
});

TileViewModel代码 #

public class TileViewModel : BaseViewModel
{
    ObservableCollection<Tile> views = new ObservableCollection<Tile>();
    
    public ObservableCollection<Tile> Tiles { get => views; }

    public TileViewModel(ObservableCollection<Tile> views)
    {
        this.views = views;
    }
}

Tile类代码 #

public class Tile : IHasAttribute
{
    public Dictionary<string, string> Attributes { get; set; }
    public String Text { get; set; }
    public String Id { get; set; }
    public String ImageID { get; set; }
    public ImageSource ImageSource { get; set; }

    public Tile(string id, string name, string imageID)
    {
        Attributes = new Dictionary<string, string>();
        Id = id;
        Text = name;
        ImageID = imageID;
    }

    public String getAttribute(string key)
    {
        if (Attributes.ContainsKey(key)) return Attributes[key];
        return "none";
    }
}

异常现象 #

• 仅展示14张256×256分辨率图片，初始加载页面仍严重卡顿
• 将设备旋转至横屏后卡顿完全消失，切回竖屏也保持流畅
• 使用不同图片URL时性能骤降，复用相同图片URL则无卡顿
• 相同场景在Xamarin.Forms中运行完全正常

可能的原因分析 #

1. MAUI Android图片缓存机制差异：MAUI内置Image控件的缓存策略与Xamarin.Forms不同，不同URL的图片未被有效缓存，导致初始加载时重复下载/解码
2. CollectionView布局测量开销：竖屏状态下GridItemsLayout的初始布局测量逻辑存在性能问题，横屏后重新布局触发了更优的测量路径
3. ItemTemplate布局层级与重复计算：每个Item都重复计算屏幕宽度，且布局嵌套（Border→Grid→Image/Label）增加了视觉树渲染开销
4. MAUI版本Bug：特定版本的MAUI Android中存在CollectionView或Image加载的性能缺陷，横屏切换触发了Bug的规避逻辑

解决方案建议 #

1. 启用CollectionView元素回收策略 #

设置CachingStrategy为RecycleElement，减少Item的创建与销毁开销：

collectionView.CachingStrategy = ItemViewCachingStrategy.RecycleElement;

2. 优化图片加载与缓存 #

• 改用第三方图片加载库替代内置Image控件，它提供更灵活的缓存配置和异步加载优化
• 若坚持使用内置Image，确保ImageSource启用缓存并设置有效期：

  ImageSource = ImageSource.FromUri(new Uri(imageUrl), new UriImageSourceOptions
  {
      CacheValidity = TimeSpan.FromDays(7),
      CachingEnabled = true
  });
  

3. 优化ItemTemplate布局与计算 #

• 提前计算并复用图片宽度，避免每个Item重复计算屏幕尺寸：

  // 在页面构造时计算一次
  private readonly double _imageWidth;
  public YourPage()
  {
      _imageWidth = DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density * 0.25;
  }
  // 在ItemTemplate中直接使用
  image.WidthRequest = _imageWidth;
  

• 简化布局层级，例如用VerticalStackLayout替代Grid（仅两行的场景下更轻量）：

  var stack = new VerticalStackLayout { Spacing = 5 };
  stack.Add(image);
  stack.Add(text);
  border.Content = stack;
  

• 将Border的样式提取到资源字典中复用，避免每个Item创建新的Brush和StrokeShape：

  <!-- 在Resources/Styles.xaml中添加 -->
  <Style x:Key="TileBorderStyle" TargetType="Border">
      <Setter Property="BackgroundColor" Value="Transparent"/>
      <Setter Property="Padding" Value="8"/>
      <Setter Property="StrokeThickness" Value="2"/>
      <Setter Property="StrokeShape">
          <RoundRectangle CornerRadius="3"/>
      </Setter>
      <Setter Property="Stroke" Value="LimeGreen"/>
  </Style>
  

  然后在代码中应用样式：

  border.Style = (Style)App.Current.Resources["TileBorderStyle"];
  

4. 预加载图片 #

在页面显示前，提前将所有图片加载到缓存中：

foreach (var tile in tileViewModel.Tiles)
{
    if (tile.ImageSource is UriImageSource uriSource)
    {
        await uriSource.LoadAsync(CancellationToken.None);
    }
}

5. 升级MAUI版本 #

将MAUI升级到最新稳定版，官方可能已修复相关的性能Bug。

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