Xamarin CollectionView 项目均匀适合

Question

我正在开发一个 Xamarin Android 项目，并且有一个 CollectionView 包含一些动态 Button 项（目前为 6），但它们似乎被剪掉了或“消失了”开箱即用”（希望您能理解 - 我不知道对此的确切描述）。

示例代码（简化）：

<CollectionView
   ItemsLayout="HorizontalList"
   ItemsSource="{Binding Items}">
   <CollectionView.ItemTemplate>
      <DataTemplate>
         <Button Text="Text" />
      </DataTemplate>                               
   </CollectionView.ItemTemplate>
</CollectionView>

结果截图：

请注意，图像中只显示了 4½ 个项目 - 其余项目被“切断”或“剪掉”，即移到外面（或任何你称之为的东西）而不显示。

如果我手动将项目插入网格（并且不使用绑定），我可以获得我想要的结果。

查看示例代码：

<Grid ColumnSpacing="8">
   <Button Grid.Column="0" Text="Text" />
   <Button Grid.Column="1" Text="Text" />
   <Button Grid.Column="2" Text="Text" />
   <Button Grid.Column="3" Text="Text" />
   <Button Grid.Column="4" Text="Text" />
   <Button Grid.Column="5" Text="Text" />
</Grid>

结果截图：

那么如何确保 CollectionView 中的可绑定项目均匀地贴合，即不被剪掉（并且具有相同的 auto-width）？

非常感谢！

Answer 1

是的，CollectionView是一种使用不同布局规范呈现数据列表的视图。它旨在为 ListView.

提供更灵活、更高效的替代方案

和CollectionView应该用于呈现需要滚动或选择的数据列表。正如Andrew，在你的代码中我们可以发现属性 ItemsLayout 的值为HorizontalList，所以如果内容无法完全水平显示，CollectionView 将水平滚动。

 ItemsLayout="HorizontalList"

从文献Xamarin.Forms CollectionView Layout，我们知道

默认情况下，CollectionView 将在垂直列表中显示其项目。但是，可以使用以下任何布局：

垂直列表 – 垂直增长的单列列表作为新的
已添加项目。
Horizontal list – new
水平增长的单行列表已添加项目。
垂直网格 – multi-column 垂直增长的新网格
已添加项目。
水平网格 – multi-row 水平增长的新网格
已添加项目。

可以通过将 ItemsLayout 属性设置为派生自 ItemsLayout class 的 class 来指定这些布局。此 class 定义了以下属性：

Orientation，类型为ItemsLayoutOrientation，指定方向 CollectionView 在其中随着项目的添加而展开。
SnapPointsAlignment，属于 SnapPointsAlignment 类型，指定如何捕捉点与项目对齐。
SnapPointsType，类型为 SnapPointsType，指定行为滚动时捕捉点。

更多可以查看官方文档CollectionView Introduction and CollectionView Layout.

另外，如果你不想滚动，当要显示的数据不需要滚动或选择时，可以使用可绑定布局。有关详细信息，请参阅 Xamarin.Forms 中的 Bindable Layouts。

请参考以下代码：

    <StackLayout BindableLayout.ItemsSource="{Binding Items}"
         Orientation="Horizontal" >
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Button Text="Text" WidthRequest="50" />
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>

Answer 2

感谢您的评论。

我找到了另一个可行的解决方案，了解如何使用 FlexLayout 控件作为我的容器来很好地适应我的项目。

代码示例：

<StackLayout>
   <FlexLayout BindableLayout.ItemsSource="{Binding Items}"
      JustifyContent="SpaceBetween"
      Wrap="NoWrap">
      <BindableLayout.ItemTemplate>
         <DataTemplate x:DataType="{x:Null}">
            <Button FlexLayout.Basis="14%" Text="{Binding Text}" />
         </DataTemplate>
      </BindableLayout.ItemTemplate>
   </FlexLayout>
</StackLayout>

Xamarin CollectionView 项目均匀适合

Xamarin CollectionView items fit evenly

collectionview

xamarin

xamarin.forms