Мой scrollview прыгает, когда я добавляю свой contentview в качестве дочернего элемента в stackpanel

ProgramBox

Мой scrollview прыгает, когда я добавляю свой contentview в качестве дочернего элемента в stackpanel

Post author:admin
Запись опубликована:30 января, 2023
Post category:Вопросы по программированию

#c# #xamarin #xamarin.forms

Вопрос:

В формах Xamarin, когда я добавляю свой contentView в качестве дочернего элемента в stacklayout, мой scrollview немного подскакивает. В Windows не прыгает, а в Android прыгает. видео В моем contentView есть одно изображение и одна метка. Я добавляю свой contentView в качестве дочернего элемента, когда мой scrollview опускается вниз. Я создал для этого асинхронный метод. Мой код главной страницы:

     <ScrollView Orientation="Vertical" HorizontalScrollBarVisibility="Never" Grid.Row="1" Grid.Column="1" VerticalOptions="Fill" Padding="0" Margin="0,0,10,0" x:Name="scroll_R" Scrolled="scroll_R_Scrolled">
        <StackLayout Orientation="Vertical" x:Name="main_w" VerticalOptions="Fill">
        </StackLayout>
    </ScrollView>

И код c #:

 private async void scroll_R_Scrolled(object sender, ScrolledEventArgs e)
{
    if (loading) return;
    if(e.ScrollY >= ((scroll_R.ContentSize.Height - scroll_R.Height) - 200))
    {
        loading = true;
        fo_grid.RaiseChild(load_txt);
        load_txt.IsVisible = true;
                        

        await Task.Run(async () =>
        {
            if (Connectivity.NetworkAccess == NetworkAccess.Internet)
            {
                string json = new WebClient().DownloadString("https://szemle.hu/mobilapp.php?op=listamp;r="   menu   "amp;min="   load_int   "amp;l=10");
                List<fooldal_items> fin = JsonConvert.DeserializeObject<List<fooldal_items>>(json);
                Device.BeginInvokeOnMainThread(() =>
                {
                    load_int  = 10;
                    fi = fin;
                });
            }
            else
            {
                DisplayAlert("Warning", "No internet connection!", "OK");
            }
        });
        addRow();
        loading = false;
    }
}

public void addRow()
{
    foreach (fooldal_items f in fi)
    {
        Button b = new Button();
        b.Text = "test";
        main_w.Children.Add(he);
    }
}

Класс fooldal_items:

 class fooldal_items
{
    [DataMember]
    public string ID { get; set; }
    [DataMember]
    public string cim { get; set; }
    [DataMember]
    public string rovat { get; set; }
    [DataMember]
    public string kep { get; set; }
    [DataMember]
    public string tipus { get; set; }
}

МОЙ код contentview.

     <?xml version="1.0" encoding="UTF-8"?>
    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:controls="clr-namespace:App1"
                 x:Class="App1.hirlista_elem">
      <ContentView.Content>
            <Grid>
                <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,0,5,15" BackgroundColor="White" Padding="10" Orientation="Vertical" >
                    <Image Source="default" x:Name="img" HorizontalOptions="Fill" Aspect="AspectFit" HeightRequest="200"/>
                    <Label Text="TESZT6543" FontSize="Subtitle" TextColor="#208b55" x:Name="lbl" Grid.Row="1" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                </StackLayout>
            </Grid>
        </ContentView.Content>
    </ContentView>

Мой код contentview на c #:

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace App1
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class hirlista_elem : ContentView
    {
        public MainPage mp;

        string id;

        public hirlista_elem(string img_url, string title, string _id, MainPage _mp)
        {
            InitializeComponent();

            if(img_url != "") img.Source = img_url;
            lbl.Text = title;    

            //img.HeightRequest = img.Height;
            mp = _mp;
            //enable tap
            var open_rovat = new TapGestureRecognizer();
            open_rovat.Tapped  = Open_rovat_Tapped;
            this.GestureRecognizers.Add(open_rovat);
            id = _id;
        }

        private void Open_rovat_Tapped(object sender, EventArgs e)
        {
           //
        }
    }
}

1. Привет, что вы имеете в виду под прыжками в Android? Вы могли бы поделиться соответствующим GIF-файлом, чтобы объяснить это.

2. Привет! Когда я записываю его с помощью screen recorder, он не прыгает, поэтому я записал его с другого телефона. Видео

3. Хорошо, спасибо, что поделились. Я проверю это, если у вас есть хорошая идея, обновлю ее позже.

4. Привет, хотя это не воспроизводится на моем локальном сайте, но из общего видео кажется, что загрузка оставшихся элементов требует буферного времени. Я не уверен, является ли это ограничением для мобильных устройств. С точки зрения улучшения пользовательского интерфейса мы можем добавить задержку или анимацию загрузки до отображения следующих элементов группы.

5. Когда я использую iOS и добавляю элементы в scrollview, он всегда увеличивает микро-анимацию. Похоже, здесь аналогичная проблема.

Ответ №1:

Я нахожу ответ. Измените ScrollView на Listview и удалите stacklayout. Затем попробуйте этот код:

 <ListView CachingStrategy="RecycleElement" Grid.Row="1" Grid.Column="1" VerticalOptions="Fill" Margin="0,0,10,0" x:Name="list_V" Scrolled="list_V_Scrolled" HasUnevenRows="True" ItemAppearing="list_V_ItemAppearing">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                                            <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,0,5,15" BackgroundColor="White" Padding="10" Orientation="Vertical" >
                                                <Image Source="{Binding kep_url}" HorizontalOptions="Fill" Aspect="AspectFit" HeightRequest="200"/>
                                                <Label Text="{Binding cim}" FontSize="Subtitle" TextColor="#208b55" x:Name="lbl" Grid.Row="1" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                                            </StackLayout>
                                            <Image Source="https://szemle.hu/design/img/sarok.png" VerticalOptions="Start" HorizontalOptions="End" Margin="0,0,5,0" HeightRequest="100" WidthRequest="100" Aspect="AspectFit"/>
                                            <Image Source="{Binding kep_r_f}" x:Name="rovat_img" VerticalOptions="Start" HorizontalOptions="End" Margin="{Binding margin}" HeightRequest="50" WidthRequest="50" Aspect="AspectFit"/>
                                        </Grid>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

Создайте класс elements следующим образом:

 public class elements
{
    public MainPage mp { get; set; }

    public string id { get; set; }

    public string kep_url { get; set; }

    public string cim { get; set; }

    public string tipus { get; set; }

    public string kep_r_f { get; set; }

    public Thickness margin { get; set; }
}

А затем используйте этот код в MainPage.cs:

 public ObservableCollection<elements> elemek { get; private set; }

private async void list_V_ItemAppearing(object sender, ItemVisibilityEventArgs e)
{
    if (loading) return;
    if (e.Item == elemek[elemek.Count - 3] amp;amp; !loading amp;amp; menu != rovatok.fooldal)
    {
        //LOAD YOUR ELEMENTS HERE
    }
}