Xamarin Form中如何调整CollectionView的2列垂直显示顺序

默认使用GridItemsLayout Orientation="Vertical" Span="2"时，CollectionView会按行优先顺序排列元素：

Item0 Item1
Item2 Item3
Item4 Item5

要实现目标的列优先排列：

Item0 Item3
Item1 Item4
Item2 Item5

可以用以下两种方案：

方案一：重新排列数据源（简单直接） #

通过代码将原数据源按列优先逻辑重新排序，再绑定给CollectionView：

// 通用方法：将列表转换为列优先排列的新列表
public List<T> ConvertToColumnFirstOrder<T>(List<T> originalList, int columnCount)
{
    var rearrangedList = new List<T>();
    // 计算需要的行数
    int rowCount = (int)Math.Ceiling((double)originalList.Count / columnCount);

    for (int rowIndex = 0; rowIndex < rowCount; rowIndex++)
    {
        for (int colIndex = 0; colIndex < columnCount; colIndex++)
        {
            // 计算原列表中的对应索引
            int originalIndex = colIndex * rowCount + rowIndex;
            if (originalIndex < originalList.Count)
            {
                rearrangedList.Add(originalList[originalIndex]);
            }
        }
    }
    return rearrangedList;
}

使用示例：

// 原数据源
var originalItems = new List<string> { "Item0", "Item1", "Item2", "Item3", "Item4", "Item5" };
// 转换为2列的列优先排列
var rearrangedItems = ConvertToColumnFirstOrder(originalItems, 2);
// 绑定到CollectionView的ItemsSource
MyCollectionView.ItemsSource = rearrangedItems;

方案二：自定义ItemsLayout（适合复杂场景） #

如果不想修改数据源，可以自定义继承GridItemsLayout的布局类，重写布局逻辑实现列优先排列：

public class ColumnFirstGridItemsLayout : GridItemsLayout
{
    public ColumnFirstGridItemsLayout(int span) : base(span)
    {
        Orientation = ItemsLayoutOrientation.Vertical;
    }

    protected override LayoutManager CreateLayoutManager()
    {
        return new ColumnFirstGridLayoutManager(this);
    }

    private class ColumnFirstGridLayoutManager : GridLayoutManager
    {
        public ColumnFirstGridLayoutManager(GridItemsLayout layout) : base(layout)
        {
        }

        public override IReadOnlyList<LayoutInformation> GetLayoutInformation(int itemCount)
        {
            var layoutInfos = new List<LayoutInformation>();
            int span = ((GridItemsLayout)Layout).Span;
            int rowCount = (int)Math.Ceiling((double)itemCount / span);

            for (int i = 0; i < itemCount; i++)
            {
                // 按列优先计算行和列索引
                int col = i / rowCount;
                int row = i % rowCount;
                layoutInfos.Add(new LayoutInformation(i, new Rect(col * ItemSize.Width, row * ItemSize.Height, ItemSize.Width, ItemSize.Height)));
            }

            return layoutInfos;
        }
    }
}

在XAML中使用自定义布局：

<CollectionView>
    <CollectionView.ItemsLayout>
        <local:ColumnFirstGridItemsLayout Span="2" />
    </CollectionView.ItemsLayout>
</CollectionView>

内容的提问来源于stack exchange，提问作者MainakChoudhury