我的 UI 上有一个
collectionview
,我最初加载了 20 个项目。我添加了 RemainingItemsThresholdReached
事件,用于在到达前 20 个项目的末尾时加载接下来的 20 个项目。但是加载前 20 个后,它会立即加载下一个 20 个,然后再次加载下一个 20 个,然后重复加载所有项目。
我在不同的页面上添加了相同类型的逻辑,并且在那里它工作正常。所以我怀疑问题出在该页面上使用的布局。下面我添加了我正在使用的布局结构。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:rgAnimations="clr-namespace:RGPopup.Maui.Animations;assembly=RGPopup.Maui"
xmlns:pages="clr-namespace:RGPopup.Maui.Pages;assembly=RGPopup.Maui"
NavigationPage.HasNavigationBar="false"
xmlns:maps="http://schemas.microsoft.com/dotnet/2021/maui/maps"
xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Maui"
BackgroundColor="White">
<ContentPage.Resources>
<ResourceDictionary>
<local2:ProfileNameConverter x:Key="nameConverter"></local2:ProfileNameConverter>
<local3:DatetimeToStringConverter x:Key="cnvDateTimeConverter"></local3:DatetimeToStringConverter>
<local3:TweetUrlsLinkconverter x:Key="urlJoinConverter"></local3:TweetUrlsLinkconverter>
<local3:SpecialCharactorConverter x:Key="specialCharactorConverter"></local3:SpecialCharactorConverter>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<Grid BackgroundColor="#eeeeee">
<Grid.RowDefinitions>
<RowDefinition Height="{OnIdiom Phone=60, Tablet=90, Desktop=60}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.5*" />
<ColumnDefinition Width="7*" />
<ColumnDefinition Width="1.5*" />
</Grid.ColumnDefinitions>
//Header layout
</Grid>
<ScrollView
x:Name="frienddetails_scrollview"
IsVisible="False"
Orientation="Vertical"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout
Margin="15">
//Middle layout
<CollectionView
x:Name="historyCollectionView"
SelectionMode="None"
RemainingItemsThreshold="1"
RemainingItemsThresholdReached="LoadMoreHistory"
BackgroundColor="#ffffff">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
Margin="0,0,0,10">
<StackLayout
x:Name="Day_layout"
Orientation="Vertical"
BackgroundColor="#eeeeee"
Padding="5">
<Label
Text="{Binding userLocationTO.createdTime,Converter={StaticResource cnvDateTimeConverter}}"
TextColor="#313131"
Margin="10,0,0,0"
HorizontalOptions="Start"
HorizontalTextAlignment="Center">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>18</OnIdiom.Phone>
<OnIdiom.Tablet>27</OnIdiom.Tablet>
<OnIdiom.Desktop>18</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
</Label>
</StackLayout>
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<!--<ColumnDefinition Width="4*" />-->
</Grid.ColumnDefinitions>
<StackLayout
Grid.Column="0"
Orientation="Vertical">
<StackLayout
Orientation="Horizontal"
Margin="0,10,0,0">
<Image
Source="{Binding IconType}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Start">
<Image.WidthRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>20</OnIdiom.Phone>
<OnIdiom.Tablet>30</OnIdiom.Tablet>
<OnIdiom.Desktop>20</OnIdiom.Desktop>
</OnIdiom>
</Image.WidthRequest>
<Image.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>20</OnIdiom.Phone>
<OnIdiom.Tablet>30</OnIdiom.Tablet>
<OnIdiom.Desktop>20</OnIdiom.Desktop>
</OnIdiom>
</Image.HeightRequest>
</Image>
<Label
x:Name="Emergency_label"
Text="{Binding triggerType}"
HorizontalOptions="Start"
VerticalOptions="CenterAndExpand"
TextColor="#1c98d7">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>16</OnIdiom.Phone>
<OnIdiom.Tablet>24</OnIdiom.Tablet>
<OnIdiom.Desktop>16</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
</Label>
</StackLayout>
<Grid>
<Label
Text="{Binding AllAudits}"
HorizontalOptions="Start"
VerticalOptions="CenterAndExpand"
Margin="0,2,0,8"
TextColor="#545454">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>14</OnIdiom.Phone>
<OnIdiom.Tablet>21</OnIdiom.Tablet>
<OnIdiom.Desktop>14</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
</Label>
</Grid>
</StackLayout>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Label
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center"
IsVisible="False"
Text="No history found!"
x:Name="no_history_label">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Roboto-Light" />
<On Platform="Android" Value="Roboto-Light.ttf#Roboto-Light" />
<On Platform="UWP" Value="Assets/Fonts/Roboto-Light.ttf#Roboto" />
</OnPlatform>
</Label.FontFamily>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>18</OnIdiom.Phone>
<OnIdiom.Tablet>26</OnIdiom.Tablet>
<OnIdiom.Desktop>18</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
</Label>
<StackLayout x:Name="chat_stack" IsVisible="{Binding chatVisibility}" VerticalOptions="Fill" >
<StackLayout.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>600</OnIdiom.Phone>
<OnIdiom.Tablet>900</OnIdiom.Tablet>
<OnIdiom.Desktop>600</OnIdiom.Desktop>
</OnIdiom>
</StackLayout.HeightRequest>
<RefreshView
IsVisible="{Binding chatVisibility}"
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CollectionView
x:Name="MyTweetsList"
Margin="0,5,0,5"
ItemsSource="{Binding AllItems,Mode=TwoWay}"
RemainingItemsThreshold="0"
IsVisible="{Binding chatVisibility}"
RemainingItemsThresholdReached="LoadMoreTweets"
VerticalOptions="FillAndExpand"
HorizontalOptions="Fill">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
x:Name="Item"
HorizontalOptions="Fill"
VerticalOptions="FillAndExpand"
Orientation="Vertical">
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.HeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>400</OnIdiom.Phone>
<OnIdiom.Tablet>600</OnIdiom.Tablet>
<OnIdiom.Desktop>400</OnIdiom.Desktop>
</OnIdiom>
</CollectionView.HeightRequest>
</CollectionView>
</RefreshView>
</StackLayout>
<Label
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
IsVisible="{Binding ComingSoonVisibility}"
HorizontalTextAlignment="Center"
Text="No Messages Yet."
x:Name="no_announcement_label">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Roboto-Light" />
<On Platform="Android" Value="Roboto-Light.ttf#Roboto-Light" />
<On Platform="UWP" Value="Assets/Fonts/Roboto-Light.ttf#Roboto" />
</OnPlatform>
</Label.FontFamily>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>18</OnIdiom.Phone>
<OnIdiom.Tablet>26</OnIdiom.Tablet>
<OnIdiom.Desktop>18</OnIdiom.Desktop>
</OnIdiom>
</Label.FontSize>
</Label>
</StackLayout>
</ScrollView>
<Grid
x:Name="tweetBox"
IsVisible="False"
Margin="0,0,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
//message sending layout
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
我对
historyCollectionView
有疑问,并且同一页面上还有另一个 CollectionView
。
任何人都可以通过检查上面的 xaml 布局代码来判断问题出在哪里吗?
更新:
xaml.cs代码
public partial class FriendDetailsPage : ContentPage
{
public ObservableCollection<UserLocationHistoryHBList> allHistoryList;
bool loadMoreHistory = false;
bool haveHistoryItemsToLoad = false;
public FriendDetailsPage(UserFriendHBList friendsdetails)
{
allHistoryList = new ObservableCollection<UserLocationHistoryHBList>();
await Task.Run(async () => await SetHistoryListItems(monitorId));
}
public async Task SetHistoryListItems(string selecteduserId)
{
try
{
//API Call
if (locationHistory.userLocationHistoryHBList != null)
{
if (locationHistory.userLocationHistoryHBList.Count != 0)
{
foreach (var item in locationHistory.userLocationHistoryHBList)
{
//list iteration and adding list to collection
allHistoryList.Add(item);
}
MainThread.BeginInvokeOnMainThread(async () =>
{
//setting data to collectionview
historylistview.ItemsSource = allHistoryList;
UserDialogs.Instance.HideHud();
});
if (locationHistory.userLocationHistoryHBList.Count == 20)
{
haveHistoryItemsToLoad = true;
}
else
{
haveHistoryItemsToLoad = false;
}
}
else
{
SetNoHistoryAlert();
}
}
else
{
SetNoHistoryAlert();
}
}
catch (Exception ex)
{
UserDialogs.Instance.HideHud();
Debug.WriteLine("Exception:>" + ex);
}
}
//Load more items API call
void LoadMoreHistory(object sender, EventArgs e)
{
if (haveHistoryItemsToLoad)
{
haveHistoryItemsToLoad = false;
loadMoreHistory = true;
SetHistoryListItems(friendsdata.userId);
}
}
}
我重现了你的问题。您是对的,确实是 XAML 文件布局导致了问题。 这是我的解决方案。
在您的代码中,删除围绕 CollectionView 的外部 ScrollView 标签,并将 name 属性设置为“historyCollectionView”。这样,您就可以获得您想要的内容。
警告! ScrollView 对象不应嵌套。另外,ScrollView对象不应该与其他提供滚动的控件嵌套,例如 CollectionView、ListView 和 WebView。 有关ScrollView的更多信息,请参阅ScrollView。