Xamarin Forms Grid滚动缓慢

Question

我有问题。我有一个带有GridView的页面。现在，我进行网络通话以获取带有图像位置的json文本。在该调用之后，我为每个图像做一个GetStream来显示网格中的图像。这段代码的工作方式与我想要的方式相同，并且图像在Grid中显示，但是在Grid中的滚动非常缓慢。现在这是我的XAML：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyApp.MemeTemplateList"
             BackgroundColor="#212121"
             Title="Templates">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Fill">
            <Frame IsClippedToBounds="True" HeightRequest="45" CornerRadius="5" Padding="0" Margin="15,15,15,0" BackgroundColor="Transparent">
                <Entry Placeholder="Search" ReturnType="Done" PlaceholderColor="Gray" x:Name="txtSearch" Margin="5,0,0,0" TextColor="White" />
            </Frame>

            <ScrollView>
                <Grid x:Name="MemeTemplateGrid" VerticalOptions="Start">
                    <Grid.RowDefinitions>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="15" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="15" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="15" />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ScrollView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

这是C＃代码：

public MemeTemplateList()
{
    InitializeComponent();

    var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
    var width = mainDisplayInfo.Width;
    var density = mainDisplayInfo.Density;
    var ScaledWidth = width / density;

    MemeWidthHeight = (ScaledWidth - (3 * 20)) / 2;

    loadingTemplates += onLoadingTemplates;
    ThreadPool.QueueUserWorkItem(o => LoadTemplateList());
}

private event EventHandler loadingTemplates = delegate { };

private void LoadTemplateList()
{
    loadingTemplates(this, EventArgs.Empty);
}

private async void onLoadingTemplates(object sender, EventArgs args)
{
    List<Template> templateList = await App.RestService.GetTemplates(App.User);
    List<ImageSource> sourceList = new List<ImageSource>();

    foreach (var template in templateList)
    {
        ImageSource source = ImageSource.FromUri(new Uri("mysite.org" + template.FileName));
        sourceList.Add(source);
    }

    int GridNumRowsToCreate = Convert.ToInt32(Math.Ceiling((decimal)templateList.Count / 2));

    for (var x = 1; x <= GridNumRowsToCreate; x++)
    {
        MemeTemplateGrid.RowDefinitions.Add(new RowDefinition { Height = 5 });
        MemeTemplateGrid.RowDefinitions.Add(new RowDefinition { Height = MemeWidthHeight });
        MemeTemplateGrid.ColumnDefinitions[1].Width = MemeWidthHeight;
        MemeTemplateGrid.ColumnDefinitions[3].Width = MemeWidthHeight;

        Dictionary<CachedImage, int> ImageKey = new Dictionary<CachedImage, int>();

        int imageIndex = 0;
        for (var i = 0; i < MemeTemplateGrid.RowDefinitions.Count; i++)
        {
            if (i % 2 != 0)
            {
                for (var j = 0; j < MemeTemplateGrid.ColumnDefinitions.Count; j++)
                {
                    if (j == 1 || j == 3)
                    {
                        if (imageIndex < sourceList.Count)
                        {
                            ImageSource source = sourceList.ElementAt(imageIndex);

                            /*Image image = new Image { Source = source, VerticalOptions = LayoutOptions.Center,
                                                        HorizontalOptions = LayoutOptions.Fill};*/

                            var image = new CachedImage
                            {
                                Source = source,
                                VerticalOptions = LayoutOptions.Center,
                                HorizontalOptions = LayoutOptions.Fill
                            };

                            ImageKey.Add(image, imageIndex);

                            var SelectMeme = new TapGestureRecognizer();

                            SelectMeme.Command = new Command<CachedImage>((k) => AddImageToCollection(k, templateList.ElementAt(ImageKey[image]).FileName));
                            SelectMeme.CommandParameter = image;

                            image.GestureRecognizers.Add(SelectMeme);

                            MemeTemplateGrid.Children.Add(image, j, i);
                            imageIndex++;
                        }
                    }
                }
            }
        }
    }
}

现在有人知道为什么滚动不流畅。我正在执行以下操作：

1. 获取包含所有模板文件名的列表
2. 使用每个模板的图像源创建一个列表，因此我只加载一次图像
3. 在每行2个模板上打印，当我得到一个奇数时，创建一个新行

现在如何使它更快，所以滚动变得更平滑！？

有什么建议吗？

Answer 1

请尝试使用collectionView并使用CachedImage。https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/