如何让MVVM模式下的CollectionView项连续排列？

要实现你想要的项自动换行、连续排列的效果，本质是需要给CollectionView设置流式布局（Wrap Layout），以下是两种兼容MVVM模式的可行方案：

方案一：使用CollectionView + FlexLayoutItemsLayout（Xamarin.Forms 5.0+） #

Xamarin.Forms 5.0及以上版本支持直接给CollectionView配置FlexLayoutItemsLayout，实现自动换行的流式布局：

<CollectionView ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand">
    <!-- 配置流式布局规则 -->
    <CollectionView.ItemsLayout>
        <FlexLayoutItemsLayout 
            Direction="Row"       <!-- 项横向排列 -->
            Wrap="Wrap"           <!-- 超出容器宽度自动换行 -->
            JustifyContent="Start"<!-- 项左对齐 -->
            AlignItems="Center"   <!-- 垂直方向居中对齐 -->
            Spacing="5"           <!-- 项之间的间距 -->
        />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <!-- 给Label添加样式，让项更接近目标显示效果 -->
            <Label 
                Margin="3" 
                Padding="8,4" 
                BackgroundColor="#E0E0E0" 
                CornerRadius="4" 
                FontSize="14" 
                Text="{Binding MyText}" 
            />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

方案二：使用FlexLayout + BindableLayout（兼容低版本） #

如果你的项目基于Xamarin.Forms 5.0以下版本，或者想要更轻量的实现，可以直接用FlexLayout结合BindableLayout代替CollectionView：

<FlexLayout 
    BindableLayout.ItemsSource="{Binding Items}"
    Direction="Row"
    Wrap="Wrap"
    JustifyContent="Start"
    AlignItems="Center"
    VerticalOptions="FillAndExpand"
    Spacing="5"
>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Label 
                Margin="3" 
                Padding="8,4" 
                BackgroundColor="#E0E0E0" 
                CornerRadius="4" 
                FontSize="14" 
                Text="{Binding MyText}" 
            />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

原布局的问题说明 #

你之前的代码默认使用LinearItemsLayout（垂直方向），所以项是单列排列；如果用GridItemsLayout固定列数，会强制分成指定列数的网格，这两种布局都无法实现根据项自身宽度自动换行的效果，而上述方案的Wrap模式刚好解决了这个核心需求。

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