CollectionView 的 RemainingItemsThresholdReached 事件在 UI 上加载数据之前触发

问题描述 投票:0回答:1

我的 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);
        }
    }
}
maui collectionview
1个回答
0
投票

我重现了你的问题。您是对的,确实是 XAML 文件布局导致了问题。 这是我的解决方案。

在您的代码中,删除围绕 CollectionView 的外部 ScrollView 标签,并将 name 属性设置为“historyCollectionView”。这样,您就可以获得您想要的内容。

警告! ScrollView 对象不应嵌套。另外,ScrollView对象不应该与其他提供滚动的控件嵌套,例如 CollectionView、ListView 和 WebView。 有关ScrollView的更多信息,请参阅ScrollView

© www.soinside.com 2019 - 2024. All rights reserved.