我在列表视图中滚动许多下载的图像（按 url 显示）时遇到问题。我尝试为图像 FFImageLoading 添加库，但它不能解决滚动问题。我也不能使用ListViewCachingStrategy.RecycleElement因为我有不同数量的视图元素的视图单元。
如何解决滚动问题？
我的主页：
using System.Collections.Generic;
using FFImageLoading.Forms;
using ScrollList.ViewModels;
using Xamarin.Forms;
namespace ScrollList
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var listView = new ListView()
{
HasUnevenRows = true,
ItemTemplate = new DataTemplate(typeof(CustomProfileCell)),
SeparatorVisibility = SeparatorVisibility.None
};
Content = listView;
listView.ItemsSource = posts;
}
async void WallItemTapped(object sender, ItemTappedEventArgs e)
{
}
}
public class PostStackLayout : StackLayout
{
private Grid _imageGridLayout = null;
protected override void OnBindingContextChanged()
{
var wallPostViewModel = (MainPageViewModel)BindingContext;
switch (wallPostViewModel.Images.Count)
{
case 1:
_imageGridLayout = GetGridOnePhoto(wallPostViewModel);
break;
case 2:
_imageGridLayout = GetGridTwoPhotos(wallPostViewModel);
break;
case 3:
_imageGridLayout = GetGridThreePhotos(wallPostViewModel);
break;
// skip some code
case 8:
_imageGridLayout = GetGridEightPhotos(wallPostViewModel);
break;
}
Children.Add(_imageGridLayout);
}
private Grid GetGridOnePhoto(MainPageViewModel model)
{
var postImage1_0 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[0]
};
//Image grids for 1 post images
_imageGridLayout = new Grid()
{
ColumnDefinitions = new ColumnDefinitionCollection
{
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Auto)}
},
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)}
}
};
_imageGridLayout.Children.Add(postImage1_0, 0, 0);
return _imageGridLayout;
}
private Grid GetGridTwoPhotos(MainPageViewModel model)
{
var postImage2_0 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[0],
};
var postImage2_1 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[1],
};
//Image grids for 2 post images
_imageGridLayout = new Grid()
{
ColumnDefinitions = new ColumnDefinitionCollection
{
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
},
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)}
}
};
_imageGridLayout.Children.Add(postImage2_0, 0, 0);
_imageGridLayout.Children.Add(postImage2_1, 1, 0);
return _imageGridLayout;
}
private Grid GetGridThreePhotos(MainPageViewModel model)
{
var postImage3_0 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[0],
};
var postImage3_1 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[1],
};
var postImage3_2 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[2],
};
//Image grids for 3 post images
_imageGridLayout = new Grid()
{
ColumnDefinitions = new ColumnDefinitionCollection
{
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
},
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)},
new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)}
},
};
_imageGridLayout.Children.Add(postImage3_0, 0, 2, 0, 1);
_imageGridLayout.Children.Add(postImage3_1, 0, 1);
_imageGridLayout.Children.Add(postImage3_2, 1, 1);
return _imageGridLayout;
}
// skip some code
private Grid GetGridEightPhotos(MainPageViewModel model)
{
var postImage8_0 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[0],
};
var postImage8_1 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[1],
};
var postImage8_2 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[2],
};
var postImage8_3 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[3],
};
var postImage8_4 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[4],
};
var postImage8_5 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[5],
};
var postImage8_6 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[6],
};
var postImage8_7 = new CachedImage
{
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Source = model.Images[7],
};
//Image grids for 8 post images
_imageGridLayout = new Grid
{
ColumnDefinitions = new ColumnDefinitionCollection
{
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
},
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)},
new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)}
}
};
_imageGridLayout.Children.Add(postImage8_0, 0, 0);
_imageGridLayout.Children.Add(postImage8_1, 1, 0);
_imageGridLayout.Children.Add(postImage8_2, 2, 0);
_imageGridLayout.Children.Add(postImage8_3, 3, 0);
_imageGridLayout.Children.Add(postImage8_4, 0, 1);
_imageGridLayout.Children.Add(postImage8_5, 1, 1);
_imageGridLayout.Children.Add(postImage8_6, 2, 1);
_imageGridLayout.Children.Add(postImage8_7, 3, 1);
return _imageGridLayout;
}
}
public class CustomProfileCell : ViewCell
{
public CustomProfileCell()
{
//mainLayout
StackLayout mainLayout = new StackLayout() { Padding = new Thickness(0, 0, 0, 8) };
Grid postGrid = new Grid
{
BackgroundColor = Color.White,
Padding = new Thickness(10, 5, 10, 5),
ColumnDefinitions = new ColumnDefinitionCollection
{
new ColumnDefinition {Width = GridLength.Auto},
new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
},
RowDefinitions = new RowDefinitionCollection
{
new RowDefinition {Height = GridLength.Auto},
new RowDefinition {Height = GridLength.Auto},
new RowDefinition {Height = GridLength.Auto}
}
};
mainLayout.Children.Add(postGrid);
//Avatar Layout
var avatarLayout = new StackLayout();
postGrid.Children.Add(avatarLayout, 0, 0);
var avatarImage = new Image
{
Aspect = Aspect.AspectFill,
WidthRequest = Device.OnPlatform(55, 55, 75),
HeightRequest = Device.OnPlatform(55, 55, 75)
};
avatarImage.SetBinding(Image.SourceProperty, new Binding("UserImage"));
avatarLayout.Children.Add(avatarImage);
//User Name Layout
var userNameLayout = new StackLayout();
postGrid.Children.Add(userNameLayout, 1, 0);
var userNameLabel = new Label()
{
TextColor = Color.Black
};
userNameLabel.SetBinding(Label.TextProperty, new Binding("UserName"));
userNameLayout.Children.Add(userNameLabel);
//Post Text Layout
var textLayout = new StackLayout();
var textLabel = new Label()
{
TextColor = Color.Black
};
textLabel.SetBinding(Label.TextProperty, new Binding("Text"));
textLayout.Children.Add(textLabel);
postGrid.Children.Add(textLayout, 0, 2, 1, 2);
//insert photos
var postStackLayout = new PostStackLayout();
postGrid.Children.Add(postStackLayout, 0, 2, 2, 3);
this.View = mainLayout;
}
}
}
不良作品卷轴示例