Проблема с событием CollectionView RemainingItemsThresholdReached

Я столкнулся с двумя проблемами с CollectionView:

  1. Я дал RemainingItemsThreshold = "0" вместо CollectionView, но событие RemainingItemsThresholdReached срабатывает до достижения последнего элемента. Он вызывает около 6 элементов перед последним элементом.
  2. Когда RemainingItemsThresholdReached запускается, я загружаю следующий набор данных и добавляю его в CollectionView. Но в это время CollectionView прокручивается до первого элемента. Мы не остаемся на последнем элементе, где мы загружаем больше данных.

Моя коллекцияПросмотреть код:

<?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" 
    BackgroundColor = "White"
    x:Class = "NeedHelp.Pages.FriendDetailsPage">

    <ContentPage.Content>
        <StackLayout>
            <Grid BackgroundColor = "#eeeeee">
                
            </Grid>

            <ScrollView 
                x:Name = "frienddetails_scrollview"
                IsVisible = "False"
                Orientation = "Vertical" 
                VerticalOptions = "FillAndExpand" 
                HorizontalOptions = "FillAndExpand">
                
                <StackLayout
                    Margin = "15">
                    
                    <Frame 
                        BorderColor = "#efefef"
                        BackgroundColor = "White"
                        CornerRadius = "5"
                        HasShadow = "False"
                        Padding = "5">
                        
                    </Frame>

                    <Frame
                        BorderColor = "#efefef"
                        Padding = "3"
                        x:Name = "map_layout"
                        Margin = "0,5,0,0">
                        
                    </Frame>

                    <Label
                        Margin = "0,5,0,0"
                        x:Name = "History_label"
                        Text = "History"
                        TextColor = "#424242"
                        HorizontalOptions = "Center"
                        HorizontalTextAlignment = "Center">
                    </Label>

                    <Frame
                        x:Name = "Tab_layout"
                        BorderColor = "#efefef"
                        Margin = "0,5,0,0"
                        BackgroundColor = "White"
                        HasShadow = "False"
                        CornerRadius = "5"
                        Padding = "5">

                    </Frame>

                    <ListView 
                        x:Name = "historylistview"
                        SeparatorVisibility = "None"
                        HasUnevenRows = "True"
                        SelectionMode = "None"
                        CachingStrategy = "RecycleElement"
                        BackgroundColor = "#ffffff">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <ViewCell.View>
                                        <StackLayout
                                            Margin = "0,0,0,10">
                                            
                                        </StackLayout>
                                    </ViewCell.View>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>

                        <ListView.Footer>
                            <Label/>
                        </ListView.Footer>
                    </ListView>

                    <CollectionView 
                        x:Name = "MyTweetsList" 
                        Margin = "0,5,0,5"
                        ItemsSource = "{Binding AllItems,Mode=TwoWay}"
                        RemainingItemsThreshold = "0"
                        RemainingItemsThresholdReached = "LoadMoreTweets"
                        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>

                    <Label
                        VerticalOptions = "CenterAndExpand"
                        HorizontalOptions = "CenterAndExpand"
                        IsVisible = "{Binding ComingSoonVisibility}"
                        HorizontalTextAlignment = "Center"
                        Text = "No Messages Yet."
                        x:Name = "no_announcement_label"/>
                </StackLayout>
            </ScrollView>
            
            <Grid 
                x:Name = "tweetBox"
                IsVisible = "False"
                Margin = "0,0,0,10">

            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Обновлять

Я создал демо по этому вопросу.

В этой демонстрации я сначала загружаю 50 элементов, а затем загружаю 10 элементов. После загрузки последних 10 элементов представление коллекции прокручивается вверх и показывает начальные элементы.

Я создал новый образец, но не решил две проблемы. В моем тесте событие RemainingItemsThresholdReached сработало два раза, когда отображался последний элемент.

Liyun Zhang - MSFT 26.06.2024 13:27

Я хочу увидеть структуру xaml. Как минимум — контейнер представления вашей коллекции.

H.A.H. 26.06.2024 13:37

@MatthewPans Могу, но это должно быть частью вопроса, потому что завтра эта ссылка может быть неактивной. А потом кто-то, когда будет искать решение своей проблемы, не сможет ее проверить. Просто добавьте что-то вроде: My CollectionView находится внутри «...».

H.A.H. 26.06.2024 13:47

@MatthewPans не поймите неправильно, вы поступаете правильно, удаляя из вопроса ненужные данные. Но внешний контейнер, если он не ограничен по вертикали, может привести к полной загрузке внутреннего (представление вашей коллекции). Вот почему это важная часть конструкции.

H.A.H. 26.06.2024 13:50

@Х.А.Х. Я обновил вопрос со всей структурой пользовательского интерфейса, не могли бы вы проверить сейчас.

Matthew Pans 26.06.2024 15:11

@MatthewPans Для вашего CollectionView установите ограничение по вертикали, установив «HeightRequest=500» или что-то в этом роде.

H.A.H. 26.06.2024 15:13

@Х.А.Х. Я это уже пробовал, но без изменений

Matthew Pans 26.06.2024 15:20

Затем @MatthewPans меняет свою ориентацию на горизонтальную.

H.A.H. 26.06.2024 15:22

@Х.А.Х. Для внутренней ориентации стека CollectionView?

Matthew Pans 26.06.2024 15:23

@MatthewPans Я попытаюсь объяснить это еще раз. Если у меня есть контейнер, скажем, вид с вертикальной прокруткой. Этот контейнер «бездонный». Я могу добавлять к нему все больше и больше вещей. А если предметы, которые у меня внутри, не ограничены по высоте, они будут расти бесконечно. Контейнер важен. Просмотр коллекции должен быть ограничен. Или - вы можете изменить его ориентацию. Таким образом, он работает с горизонтальной прокруткой, и если ваш внешний контейнер ограничен по горизонтали, все будет в порядке. Если вы создадите только сетку, только с представлением вашей коллекции, и проблема исчезнет... вам нужно изменить дизайн.

H.A.H. 26.06.2024 15:33

Давайте продолжим обсуждение в чате.

H.A.H. 26.06.2024 15:39

@Х.А.Х. Я создал демо-версию этой проблемы и добавил ее к вопросу. Не могли бы вы это проверить?

Matthew Pans 04.07.2024 17:20
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
12
94
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваша главная проблема:

Эта линия

AllItems = new ObservableCollection<UserTweetsList>(Items);

Вызывает обновление всего представления вашей коллекции. Весь смысл наблюдаемой коллекции — вносить изменения в список. Пересоздание коллекции, помимо других проблем с производительностью, приводит к тому, что ваша прокрутка переходит в начало.

Ваше решение:

Используйте AllItems = new только один раз. А затем используйте AllItems.Add(..) при загрузке предметов.

Например

if (!loadMore)
{
   Items.Add(new UserTweetsList() { tweetData = "message 1", tweetUser = "Albert});
   ...
   Items.Add(new UserTweetsList() { tweetData = "message 50", tweetUser = "Albert"});
   AllItems = new ObservableCollection<UserTweetsList>(Items); << move here
}
else
{
    AllItems.Add(new UserTweetsList() { tweetData = "message 51", tweetUser = "Albert" }); << change those lines to AllItems.Add not Items.Add

Другие вопросы по теме