Xamarin Forms CollectionView无法正常显示

Question

我有一个问题。我创建了一个带有自定义ViewPage的CollectionView来放置一个带有行距的网格。ItemSource是用ViewModel设置的。现在，当我在CollectionView中滚动时，行是随机放置在屏幕上的，甚至是在彼此的内部。

这是我的xaml代码。

<CollectionView ItemsSource="{Binding agentOrderList}" Margin="5,0,5,0" HeightRequest="450">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="0"/>
    </CollectionView.ItemsLayout>

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <local:OrderView BindingContext="{Binding }"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

这里是ViewModel:

public class VM_AgentsPage : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private ObservableCollection<OrderBundle> _agentOrderList;
    public ObservableCollection<OrderBundle> agentOrderList
    {
        get
        {
            return _agentOrderList;
        }
        set
        {
            if (_agentOrderList != value)
            {
                _agentOrderList = value;
                OnPropertyChanged();
            }
        }
    }


    public VM_AgentsPage()
    {
        agentOrderList = new ObservableCollection<OrderBundle>();
        LoadAgentOrders_Handler();
    }


    public Task LoadAgentOrders_Handler()
    {
        return LoadAgentOrders();
    }
    private async Task LoadAgentOrders()
    {
        IsRefreshingAgentOrders = true;

        App.AgentOrderList = await App.RestService.GetAgentOrders(App.AgentId);

        ObservableCollection<OrderBundle> tempAgentOrderList = new ObservableCollection<OrderBundle>();

        foreach (OrderBundle orderBundle in App.AgentOrderList)
        {
            tempAgentOrderList.Add(orderBundle);
        }

        agentOrderList = tempAgentOrderList;

        IsRefreshingAgentOrders = false;
    }
}

最后是OrderView. xaml. cs:

public partial class OrderView : ContentView
{
    Grid grid;

    public OrderView()
    {
        InitializeComponent();


        grid = new Grid
        {
            ColumnDefinitions =
        {
            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) },
            new ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star) }
        }
        };

        grid.RowSpacing = 0;

        this.Content = grid;


        this.BindingContextChanged += View1_BindingContextChanged;
    }

    private void View1_BindingContextChanged(object sender, EventArgs e)
    {
        var obj = this.BindingContext as OrderBundles;

        if (obj != null)
        {
            List<Trade> list = obj.Trades;

            for(int i = 0; i < list.Count; i++)
            {

                grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20) });

                Trade trade = list[i];
                grid.Children.Add(new Label
                {
                    Text = trade.Date
                }, 0, i);
                grid.Children.Add(new Label
                {
                    Text = trade.Action
                }, 1, i);
                grid.Children.Add(new Label
                {
                    Text = trade.Coin
                }, 2, i);
                grid.Children.Add(new Label
                {
                    Text = trade.Price.ToString()
                }, 3, i);              
            }

            Label label = new Label
            {
                Text = list[0].ProfitUSDT,
                TextColor = Color.Green ,
                VerticalTextAlignment = TextAlignment.Center
            };

            grid.Children.Add(label, 4, 0);


            Grid.SetRowSpan(label, list.Count);
        }
    }
}

这是一开始的样子。

但当我滚动时，它开始看起来像这样。

这是什么原因造成的？

Answer 1

我发现 BindingContextChanged 当滚动collectionview时，该方法会触发，所以它会不断添加 RowDefinition 和控件，我们应该在列表开头清除。

    private void View1_BindingContextChanged(object sender, EventArgs e)
    {
        //add the following two lines
        grid.RowDefinitions.Clear();
        grid.Children.Clear();