糟糕的名单表现

Question

一个包含显示svg，SwipeView和一些标签的SkiaSharp控件的项目模板，

导航到页面时需要花费很多时间。

我正在使用StackLayout和BindableLayout.ItemSource和ItemTemplate。

使用CollectionView将使页面加载速度更快，但是每次向下滚动的尝试都会使应用变慢一会儿，而CollectionView会生成下一批项目。

我已经将所有生成项目源的代码移到了后台，因此ui线程上唯一发生的事情是从viewmodel绑定到ObservableCollection并进行绘制。

我也尝试过减少项目模板中的布局，但是并没有提高加载速度。

页面Xaml：

<DataTemplate x:Key="DataTemplateReportsItemAction">
        <StackLayout Orientation="Horizontal">
            <effectsView:SfEffectsView Style="StaticResource StyleRippleEffectReportAction">
                <effectsView:SfEffectsView.GestureRecognizers>
                    <TapGestureRecognizer Command="Binding ActionCommand" />
                </effectsView:SfEffectsView.GestureRecognizers>
                <image:SVGImage ImageSource="Binding IconName"
                                Style="StaticResource StyleSVGImageReportRowAction" />
            </effectsView:SfEffectsView>
            <BoxView Style="StaticResource StyleBoxViewReportItemAction"
                     IsVisible="Binding IsLast, Converter=StaticResource BoolToReverseBoolConverter" />
        </StackLayout>
    </DataTemplate>
    <ControlTemplate x:Key="DataTemplateReportsItemCellDefault">
        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="FillAndExpand"
                     BindingContext="TemplateBinding BindingContext">
            <StackLayout Orientation="Vertical"
                         HorizontalOptions="FillAndExpand"
                         VerticalOptions="Center">
                <Label Style="StaticResource StyleLabelReportCellTop"
                       Text="Binding DisplayValue"
                       TextColor="Binding ColorName, TargetNullValue=StaticResource ColorLabelReportCell, FallbackValue=StaticResource ColorLabelReportCell" />
                <Label Style="StaticResource StyleLabelReportCellBottom"
                       Text="Binding DisplayTitle"
                       TextColor="Binding ColorName, TargetNullValue=StaticResource ColorLabelReportCell, FallbackValue=StaticResource ColorLabelReportCell" />
            </StackLayout>
            <BoxView Style="StaticResource StyleBoxViewReportItemCell"
                     IsVisible="Binding IsLast, Converter=StaticResource BoolToReverseBoolConverter" />
        </StackLayout>
    </ControlTemplate>
    <ControlTemplate x:Key="DataTemplateReportsItemCellTrend">
        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="FillAndExpand"
                     BindingContext="TemplateBinding BindingContext">
            <StackLayout Orientation="Vertical"
                         HorizontalOptions="FillAndExpand"
                         VerticalOptions="Center">
                <image:SVGImage ImageSource="Binding IconName"
                                HorizontalOptions="Center" />
                <Label Style="StaticResource StyleLabelReportCellTrend"
                       Text="Binding DisplayTitle"
                       TextColor="Binding ColorName, TargetNullValue=StaticResource ColorLabelReportCell, FallbackValue=StaticResource ColorLabelReportCell" />
            </StackLayout>
            <BoxView Style="StaticResource StyleBoxViewReportItemCell"
                     IsVisible="Binding IsLast, Converter=StaticResource BoolToReverseBoolConverter" />
        </StackLayout>
    </ControlTemplate>
    <converters:ValueToValueConverter x:Key="CellTemplateSelector"
                                      DefaultValue="StaticResource DataTemplateReportsItemCellDefault">
        <converters:ValueToValueList>
            <converters:ValueToValueItem OnValue="x:Static reportenums:MobileColumnMetaType.Trend"
                                         ToValue="StaticResource DataTemplateReportsItemCellTrend" />
        </converters:ValueToValueList>
    </converters:ValueToValueConverter>
    <DataTemplate x:Key="DataTemplateReportsItemCell">
        <ContentView ControlTemplate="Binding MobileMetaType, Converter=StaticResource CellTemplateSelector"
                     HorizontalOptions="FillAndExpand" />
    </DataTemplate>
    <DataTemplate x:Key="DataTemplateReportsItem">
        <Grid HeightRequest="StaticResource DoubleReportRowTotalHeight">
            <Grid.RowDefinitions>
                <RowDefinition Height="StaticResource DoubleReportRowTitleHeight" />
                <RowDefinition Height="StaticResource DoubleReportRowSwipeHeight" />
            </Grid.RowDefinitions>
            <StackLayout Margin="0,5"
                         Orientation="Horizontal"
                         HorizontalOptions="FillAndExpand"
                         Spacing="10">
                <image:SVGImage ImageSource="Binding LactationIcon"
                                IsVisible="Binding LactationIcon, Converter=StaticResource StringToIsVisibleConverter"
                                Style="StaticResource StyleSVGImageReportRowLactation" />
                <Label Style="StaticResource StyleLabelReportRowTitle"
                       FontSize="Binding UseSmallTitle, Converter=StaticResource RowFontSizeConverter"
                       Text="Binding DisplayTitle" />
                <Label Style="StaticResource StyleLabelReportRowTitleGroup"
                       IsVisible="Binding GroupName, Converter=StaticResource StringToIsVisibleConverter"
                       Text="Binding GroupName" />
                <Frame Style="StaticResource StyleFrameReportRowBadge"
                       BackgroundColor="Binding Badge.BadgeType, Converter=StaticResource BadgeColorConverter"
                       IsVisible="Binding Badge.HasBadge">
                    <Label Style="StaticResource StyleLabelReportRowTitleBadge"
                           Text="Binding Badge.BadgeTitle" />
                </Frame>
            </StackLayout>
            <Grid Grid.Row="1">
                <SwipeView BackgroundColor="StaticResource ColorReportViewRowBackground"
                           IsEnabled="Binding IsEditable"
                           x:Name="swipey">
                    <SwipeView.RightItems>
                        <SwipeItems Mode="Reveal"
                                    SwipeBehaviorOnInvoked="RemainOpen">
                            <SwipeItemView WidthRequest="Binding Width, Source=Reference swipey">
                                <Grid BackgroundColor="StaticResource ColorLabelReportRowActionsBackground">
                                    <Grid Margin="20,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <effectsView:SfEffectsView Style="StaticResource StyleRippleEffectReportRowClose"
                                                                   helpers:VisualTreeHelper.ReferenceObject="Binding Source=Reference swipey">
                                            <effectsView:SfEffectsView.GestureRecognizers>
                                                <TapGestureRecognizer Tapped="OnGroupRowCloseTapped" />
                                            </effectsView:SfEffectsView.GestureRecognizers>
                                            <image:SVGImage Style="StaticResource StyleSVGImageReportRowActionsClose" />
                                        </effectsView:SfEffectsView>
                                        <StackLayout Grid.Column="2"
                                                     Orientation="Horizontal"
                                                     BindableLayout.ItemTemplate="StaticResource DataTemplateReportsItemAction"
                                                     BindableLayout.ItemsSource="Binding ActionItems" />
                                    </Grid>
                                </Grid>
                            </SwipeItemView>
                        </SwipeItems>
                    </SwipeView.RightItems>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <StackLayout Orientation="Horizontal"
                                     HorizontalOptions="FillAndExpand"
                                     BackgroundColor="StaticResource ColorTransparent"
                                     BindableLayout.ItemTemplate="StaticResource DataTemplateReportsItemCell"
                                     BindableLayout.ItemsSource="Binding Cells">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="Binding BindingContext.NavigateCommand, Source=RelativeSource Mode=FindAncestor, AncestorType=x:Type views:BasePage"
                                                      CommandParameter="Binding" />
                            </StackLayout.GestureRecognizers>
                        </StackLayout>
                        <Frame Grid.Column="1"
                               Padding="0"
                               BackgroundColor="StaticResource ColorReportGroupRowActionsBackground"
                               IsVisible="Binding IsEditable">
                            <image:SVGImage Style="StaticResource StyleSVGImageSwipe" />
                        </Frame>
                    </Grid>
                </SwipeView>
                <Grid BackgroundColor="StaticResource ColorTransparent"
                      IsVisible="Binding IsEditable, Converter=StaticResource BoolToReverseBoolConverter">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer Command="Binding BindingContext.NavigateCommand, Source=RelativeSource Mode=FindAncestor, AncestorType=x:Type views:BasePage"
                                              CommandParameter="Binding" />
                    </Grid.GestureRecognizers>
                </Grid>
            </Grid>
        </Grid>
    </DataTemplate>
</ContentView.Resources>
<ContentView.Content>
    <Grid>
        <gradient:SfGradientView BackgroundBrush="StaticResource BrushViewBackgroundGradient" />
        <Grid BackgroundColor="StaticResource ColorReportsBrowserViewBackground"
              Margin="10,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <reports:ReportToolbarView />
            <RefreshView Grid.Row="1"
                         IsRefreshing="Binding IsRefreshing, Mode=TwoWay"
                         Command="Binding RefreshCommand"
                         BackgroundColor="StaticResource ColorReportsViewBackground"
                         Margin="10,0">
                <ScrollView HorizontalScrollBarVisibility="Never"
                            VerticalScrollBarVisibility="Default">
                    <StackLayout Orientation="Vertical">
                        <StackLayout BindableLayout.ItemsSource="Binding ReportItems"
                                     BindableLayout.ItemTemplate="StaticResource DataTemplateReportsItem"
                                     Orientation="Vertical" />
                        <BoxView HeightRequest="50" />
                    </StackLayout>
                </ScrollView>
            </RefreshView>
            <sortfilter:SortFilterView Grid.Row="1"
                                       VerticalOptions="Start"
                                       IsVisible="Binding SortFilterModel.IsVisible" />
        </Grid>
    </Grid>
</ContentView.Content>

为了进行比较，用简单的Label替换项目模板会使页面加载非常快。

是否有一种方法可以在Xamarin Forms中更快地加载项目列表？