FlexLayout搭配DataTemplate时图片排列异常问题求助

问题根源 #

你当前的代码逻辑有误：每个CollectionView的列表项都单独生成了一个FlexLayout容器，每一张图片都被包裹在独立的FlexLayout里，而CollectionView默认是垂直排列这些列表项的，所以图片会堆叠在一起，根本没法实现横向均匀排列的效果——因为这些FlexLayout本身是垂直分布的，每个里面只有一张图。

正确解决方案 #

方案1：使用CollectionView的FlexLayoutItemsLayout（推荐）

把FlexLayout的布局规则放到CollectionView的ItemsLayout中，让所有列表项在同一个Flex容器里排列：

<CollectionView>
    <!-- 定义整个列表的布局规则 -->
    <CollectionView.ItemsLayout>
        <FlexLayoutItemsLayout Direction="Row" 
                               Wrap="Wrap" 
                               JustifyContent="SpaceEvenly" />
    </CollectionView.ItemsLayout>
    <!-- 定义单个列表项的结构 -->
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:ImagesJson">
            <VerticalStackLayout WidthRequest="40%">
                <Image Source="{Binding MainImage}" 
                       Aspect="AspectFit" 
                       HeightRequest="150"/>
            </VerticalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

方案2：改用BindableLayout绑定FlexLayout

如果不需要CollectionView的其他特性，可以直接用FlexLayout结合BindableLayout来实现：

<!-- 直接用FlexLayout作为容器，绑定数据源 -->
<FlexLayout Wrap="Wrap" 
            Direction="Row" 
            JustifyContent="SpaceEvenly"
            BindableLayout.ItemsSource="{Binding YourImageDataSource}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="model:ImagesJson">
            <VerticalStackLayout FlexLayout.Basis="40%">
                <Image Source="{Binding MainImage}" 
                       Aspect="AspectFit" 
                       HeightRequest="150"/>
            </VerticalStackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

关键说明 #

CollectionView.ItemTemplate的作用是定义单个列表项的UI结构，你之前把FlexLayout放在这里，相当于给每个图片都单独创建了一个布局容器，完全违背了“让所有图片在同一个Flex容器里排列”的需求。

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