.NET MAUI双ListView切换卡顿，如何优化数据绑定？

针对双ListView切换冻结、数据量大时性能下降的问题，结合你的代码场景，给出以下针对性优化方案：

核心问题分析 #

1. ListView嵌套ScrollView：ListView自带滚动功能，嵌套后会触发双重布局计算，数据量大时开销剧增。
2. 过度事件绑定：每个ViewCell的Grid都绑定了PropertyChanged事件，上千条数据会注册大量监听，切换时触发冗余回调。
3. ObservableCollection低效更新：每次调用RemoveAt(0)会触发单次集合变更通知，ListView需重新渲染整个列表，累计开销极高。
4. 双ListView共存视觉树：即使IsVisible=false，MAUI仍会维护两个ListView的布局和绑定，切换时需重新计算大量布局。

具体优化步骤 #

1. 移除ListView外层的ScrollView #

直接删除嵌套的ScrollView，利用ListView自身的滚动能力：

<!-- 优化后的ASCII Log ListView -->
<ListView x:Name="LogStackASCII"
          Grid.ColumnSpan="6"
          Grid.Row="0"
          IsVisible="{Binding IsASCIILogVisible}"
          ItemsSource="{Binding SerialLogASCII}"
          BackgroundColor="Transparent"
          ItemTapped="LogMessageTapped"
          SelectionMode="Single"
          VerticalScrollBarVisibility="Always">
    <!-- 模板内容保持不变 -->
</ListView>

<!-- HEX Log ListView同理 -->

2. 删除ViewCell内Grid的PropertyChanged事件 #

移除每个列表项Grid上的PropertyChanged="SerialLogChanged"绑定。若需处理布局变化，建议通过ViewModel逻辑或绑定实现，避免为每个条目单独注册事件。

3. 优化ObservableCollection的条目限制逻辑 #

替换逐次RemoveAt(0)的方式，改为一次性更新集合，减少变更通知次数：
首先实现ObservableCollection的AddRange扩展方法：

public static class ObservableCollectionExtensions
{
    public static void AddRange<T>(this ObservableCollection<T> collection, IEnumerable<T> items)
    {
        if (items == null) throw new ArgumentNullException(nameof(items));
        
        foreach (var item in items)
        {
            collection.Add(item);
        }
    }
}

然后修改数量限制逻辑：

private const int MaxLogEntries = 1000;

public void AddASCIILog(LogItem newItem)
{
    SerialLogASCII.Add(newItem);
    
    if (SerialLogASCII.Count > MaxLogEntries)
    {
        var trimmedItems = SerialLogASCII.Skip(SerialLogASCII.Count - MaxLogEntries).ToList();
        SerialLogASCII.Clear();
        SerialLogASCII.AddRange(trimmedItems);
    }
}

4. 改用单ListView切换数据源（推荐） #

避免双ListView共存视觉树，用同一个ListView切换ItemsSource和模板：

<Grid RowDefinitions="*,5,40" ColumnDefinitions="75,75,75,105,*">
    <ListView x:Name="LogListView"
              Grid.ColumnSpan="6"
              Grid.Row="0"
              BackgroundColor="Transparent"
              ItemTapped="LogMessageTapped"
              SelectionMode="Single"
              VerticalScrollBarVisibility="Always">
        <ListView.ItemTemplate>
            <DataTemplateSelector>
                <local:LogTemplateSelector 
                    ASCIILogTemplate="{StaticResource ASCIILogTemplate}" 
                    HEXLogTemplate="{StaticResource HEXLogTemplate}" />
            </DataTemplateSelector>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

<!-- 在资源中定义两个模板 -->
<ResourceDictionary>
    <DataTemplate x:Key="ASCIILogTemplate">
        <ViewCell>
            <Grid ColumnDefinitions="160,*" ColumnSpacing="5" BackgroundColor="Transparent">
                <Label Text="{Binding Time}" Margin="0,0,10,0" Grid.Column="0" FontSize="12"/>
                <Label Text="{Binding Message}" LineBreakMode="CharacterWrap" Grid.Column="1" FontSize="12"/>
            </Grid>
        </ViewCell>
    </DataTemplate>
    
    <DataTemplate x:Key="HEXLogTemplate">
        <ViewCell>
            <Grid Padding="1" ColumnDefinitions="160,*" ColumnSpacing="5" BackgroundColor="Transparent">
                <Label Text="{Binding Time}" Margin="0,0,10,0" Grid.Column="0" FontSize="12"/>
                <Label Text="{Binding Message}" LineBreakMode="CharacterWrap" Grid.Column="1" FontSize="12"/>
            </Grid>
        </ViewCell>
    </DataTemplate>
</ResourceDictionary>

实现模板选择器：

public enum LogType { ASCII, HEX }

public class LogTemplateSelector : DataTemplateSelector
{
    public DataTemplate ASCIILogTemplate { get; set; }
    public DataTemplate HEXLogTemplate { get; set; }
    public LogType CurrentLogType { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return CurrentLogType == LogType.ASCII ? ASCIILogTemplate : HEXLogTemplate;
    }
}

切换视图时更新数据源和模板：

public void ToggleLogView(bool showASCII)
{
    LogListView.ItemsSource = showASCII ? SerialLogASCII : SerialLogHEX;
    ((LogTemplateSelector)LogListView.ItemTemplate).CurrentLogType = showASCII ? LogType.ASCII : LogType.HEX;
}

5. 启用ListView元素复用 #

设置CachingStrategy="RecycleElement"让ListView复用ViewCell，减少内存占用和渲染开销：

<ListView x:Name="LogStackASCII"
          ...
          CachingStrategy="RecycleElement">

6. 后台线程处理数据，主线程更新UI #

频繁数据更新时，在后台线程处理数据，再通过主线程更新集合：

Task.Run(() =>
{
    var newLogItem = ProcessIncomingData();
    
    MainThread.BeginInvokeOnMainThread(() =>
    {
        AddASCIILog(newLogItem);
    });
});

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