.NET 6.0 MAUI简单UI点击按钮后卡顿1秒，求问题原因

问题描述 #

我是.NET 6.0 MAUI新手，使用Visual Studio Community 2022（64位）17.5.0版本，采用MVVM模式结合CommunityToolkit编写了一个点击按钮生成输入数字乘法表的简单程序，通过CollectionView展示乘法表，但UI会卡顿1秒，不清楚原因。

现有代码 #

XAML代码 #

<Frame Style="{StaticResource FrameBaseStyle}"
       Grid.Row="2" 
       Margin="10,10,10,0" 
       BorderColor="{StaticResource Primary}">
    <CollectionView  ItemsSource="{Binding CurrentTable}" 
                     ItemSizingStrategy="MeasureAllItems"
                     ItemsLayout="VerticleGrid"
                     Margin="10">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Border BackgroundColor="White" StrokeThickness="0.15">
                    <Grid ColumnDefinitions="Auto, 20*,20*,20*,30*" >
                        <Label Text="{Binding TableOf}"
                               Style="{StaticResource LabelLocalStyle}"/>
                        <Label Text="x" 
                               Grid.Column="1"
                               Style="{StaticResource LabelLocalStyle}"
                               HorizontalTextAlignment="End"
                               FontSize="25"/>
                        <Label Text="{Binding MultiplyBy}"
                               HorizontalOptions="End"
                               Style="{StaticResource LabelLocalStyle}"
                               Grid.Column="2"/>
                        <Label Text="=" 
                               Style="{StaticResource LabelLocalStyle}"
                               HorizontalTextAlignment="End"
                               FontSize="25"
                               Grid.Column="3"/>
                        <Label HorizontalTextAlignment="End"
                               Style="{StaticResource LabelLocalStyle}"
                               Text="{Binding Result}" 
                               Margin="0,0,5,0"
                               Grid.Column="4"/>
                    </Grid>
                </Border>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Frame>

按钮点击逻辑代码 #

private async void GetTable()
{
    await Task.Run(() => CreateTable());
}

private void CreateTable()
{
    List<Table> finalTable = new List<Table>();
    for (int i = 1; i <= 10; i++)
    {
        Table table = new Table();
        table.TableOf = TableOf;
        table.MultiplyBy = i;
        table.Result = TableOf * i;
        finalTable.Add(table);
    }
    CurrentTable = new ObservableCollection<Table>(finalTable);
}

卡顿原因分析 #

1. 线程操作错误：在后台线程中直接赋值绑定属性CurrentTable，MAUI要求UI绑定属性的更新必须在UI线程执行，框架自动线程切换的过程会产生延迟，引发卡顿。
2. 布局测量策略低效：ItemSizingStrategy="MeasureAllItems"会一次性测量所有列表项的尺寸，结合模板内Grid、多Label的复杂布局，额外增加了UI渲染的计算开销。
3. 布局属性拼写错误：ItemsLayout="VerticleGrid"是无效值（正确应为VerticalGrid），框架回退到默认布局的解析过程会额外消耗性能。

解决方法 #

1. 修正布局属性拼写 #

将CollectionView的ItemsLayout属性改为正确值：

ItemsLayout="VerticalGrid"

2. 优化布局测量策略 #

如果所有列表项尺寸固定，将ItemSizingStrategy改为MeasureFirstItem，只测量第一个项的尺寸并复用给其他项，减少测量次数：

ItemSizingStrategy="MeasureFirstItem"

3. 确保UI线程更新绑定属性 #

修改数据创建逻辑，将CurrentTable的赋值操作切换到UI线程：

private void GetTable()
{
    CreateTable();
}

private void CreateTable()
{
    List<Table> finalTable = new List<Table>();
    for (int i = 1; i <= 10; i++)
    {
        Table table = new Table();
        table.TableOf = TableOf;
        table.MultiplyBy = i;
        table.Result = TableOf * i;
        finalTable.Add(table);
    }
    // 切换到UI线程更新绑定属性
    MainThread.BeginInvokeOnMainThread(() =>
    {
        CurrentTable = new ObservableCollection<Table>(finalTable);
    });
}

如果坚持使用后台线程创建数据，需将数据创建与UI更新分离：

private async void GetTable()
{
    List<Table> finalTable = await Task.Run(() =>
    {
        List<Table> tempTable = new List<Table>();
        for (int i = 1; i <= 10; i++)
        {
            Table table = new Table();
            table.TableOf = TableOf;
            table.MultiplyBy = i;
            table.Result = TableOf * i;
            tempTable.Add(table);
        }
        return tempTable;
    });
    
    MainThread.BeginInvokeOnMainThread(() =>
    {
        CurrentTable = new ObservableCollection<Table>(finalTable);
    });
}

补充说明 #

创建10个数据项的开销极小，完全可以直接在UI线程处理，无需使用Task.Run，避免不必要的线程切换开销。

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