Xamarin.Forms。优化列表视图答案

【问题标题】：Xamarin.Forms. Optimization ListViewXamarin.Forms。优化列表视图
【发布时间】：2018-11-14 10:35:48
【问题描述】：

您能否就如何优化 ListView 提出建议？滚动时会变慢。我的 viewCell 看起来像这样：

<Grid BackgroundColor="{Binding ListViewCustomizer.ItemBorderColor, Source={x:Static theme:ThemeManager.Theme}}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

    <Grid Margin="0, 0, 0, 1" 
        BackgroundColor="{Binding ListViewCustomizer.ItemBackgroundColor, Source={x:Static theme:ThemeManager.Theme}}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid.Triggers>
            <DataTrigger Binding="{Binding IsRead}" TargetType="Grid" Value="true">
                <Setter Property="BackgroundColor" Value="#bfe3fa" />
            </DataTrigger>
        </Grid.Triggers>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="6*"/>
            <RowDefinition Height="4*"/>
        </Grid.RowDefinitions>

        <ContentView Grid.RowSpan="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="1, 1">
            <ffimageloading:CachedImage x:Name="mainImage" 
                                Source="news_placeholder.png" 
                                LoadingPlaceholder="news_placeholder.png"  
                                DownsampleToViewSize="false" 
                                CacheDuration="{x:Static constant:ImageConfig.PreviewImageCacheDuration}"
                                ErrorPlaceholder="news_placeholder.png" Aspect="AspectFill" 
                                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                        Transformations="{Binding IsRead, Converter={StaticResource BoolToTransformationConverter}}">
                <ffimageloading:CachedImage.DownsampleHeight>
                    <extensions:OnDeviceType x:TypeArguments="x:Double" Phone="130" Tablet="200"/>
                </ffimageloading:CachedImage.DownsampleHeight>
            </ffimageloading:CachedImage>
        </ContentView>            

        <Grid Grid.Column="1" RowSpacing="0" Margin="10,10,10,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

             <Label Style="{StaticResource BaseListItemLabelStyle}" FormattedText="{Binding ., Converter={StaticResource NewsItemToFormattedStringConveter}}"/>

            <ctrl:ExtendedLabel 
                Grid.Row="1"
                MultilineTrimming="True" 
                x:Name="content"
                Style="{StaticResource ListItemContentLabelStyle}" />
        </Grid>

    </Grid>
</Grid>

也许可以替代某些东西。也许我应该用代码隐藏替换所有绑定？

请帮帮我。

【问题讨论】：

标签： xaml listview xamarin.forms

【解决方案1】：

你在那个视单元里装了很多东西。此外，将数据绑定更改为隐藏代码不会给您带来显着的性能优势。

这里发生的是所有这些元素都需要运行布局通道，这需要时间（性能）。现在将它与 ListView 中的项目数量相乘。不过好消息是，一旦您改进视图以减少布局，这个乘数因素将对您有利。

我的建议：

1) 不要使用“自动”高度定义，因为在确定最终高度之前需要多次布局传递

2) 将网格缩减为一个网格，并使用 RowSpan 和 ColumnSpan 属性来设置您的元素

3) 您使用内容视图是否有原因？如果我没记错的话，您应该可以将 ffimageloading.cachedimage 直接放入网格中。

有关如何优化 xamarin 表单布局性能的更多信息，我会推荐这篇文章：https://xamarininsider.com/2017/08/03/optimizing-layout-performance-in-xamarin-forms/

【讨论】：

“不要使用“自动”高度定义”。我可以使用“*”（星号）吗？
是的，因为“自动”会多次对子项进行布局以确定正在使用的高度。 Star 占用父元素提供的可用空间的一部分或全部。