如何将 CollectionView 项目居中？答案

【问题标题】：How to centre CollectionView items?如何将 CollectionView 项目居中？
【发布时间】：2021-01-06 06:09:47
【问题描述】：

我有以下 XAML 代码，目的是将字母水平居中放在屏幕中间。但是，此代码仍将项目放在左侧。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="App1.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <StackLayout BackgroundColor="Aqua" Orientation="Horizontal" HorizontalOptions="Center">
        <CollectionView BackgroundColor="Beige" HorizontalOptions="Center">
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>A</x:String>
                    <x:String>B</x:String>
                    <x:String>C</x:String>
                    <x:String>D</x:String>
                    <x:String>E</x:String>
                    <x:String>F</x:String>
                    <x:String>G</x:String>
                    <x:String>H</x:String>
                </x:Array>
            </CollectionView.ItemsSource>

            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal" ItemSpacing="20"/>
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding .}" HorizontalOptions="Center"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

</ContentPage>

我该怎么做？

P.S.，this 是我现在得到的，this 是我想要实现的。

【问题讨论】：

HorizontalOptions="Center" 在您的Label 上。
这不起作用。它只会将标签内的字母居中，而不是 CollectionView 内的标签。
不，将 Label 置于其容器内的中心。但是，对于水平布局，我不确定它如何确定每个元素的宽度。您可能需要将标签放在布局内并使用它的 HorizontalOptions 和宽度设置
好吧，我的错。但是，这仍然不起作用。我更新了我的问题中的示例。
您是否阅读了我在评论中提出的建议？

标签： xamarin.forms

【解决方案1】：

用你的代码做了一些测试，得到了集合视图的边界，如第一个屏幕截图所示。

所以集合已经居中，就像列表中的项目太少使它看起来像左对齐一样。

选项 1：固定宽度。

将 width 添加到 Stacklayout 并为页面设置背景颜色可能对您有用。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="App1.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BackgroundColor="Beige">
    <!-- Add color above -->

    <!-- Add width below -->
    <StackLayout WidthRequest="200" BackgroundColor="Aqua" Orientation="Horizontal" HorizontalOptions="Center">
        <CollectionView BackgroundColor="Beige" HorizontalOptions="Center">
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>A</x:String>
                    <x:String>B</x:String>
                    <x:String>C</x:String>
                    <x:String>D</x:String>
                    <x:String>E</x:String>
                    <x:String>F</x:String>
                    <x:String>G</x:String>
                    <x:String>H</x:String>
                </x:Array>
            </CollectionView.ItemsSource>

            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal" ItemSpacing="20"/>
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding .}" HorizontalOptions="Center"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

或者，您也可以将宽度设置为 CollectionView，同样的结果。

选项 2. 设置边距

或者你可以在CollectionView上设置margin（不固定宽度），哦，就是stacklayout的颜色

<CollectionView Margin="80,0" ...

【讨论】：

感谢您的回答，肖。由于硬编码的边距，我担心这对我不起作用。虽然这适用于包含从 A 到 H 的字母的列表，但当列表中的项目较少、项目不是单个字母时、使用不同的字体系列或大小时，或者......等时，它将不起作用。请参阅例如here 和here。
Emmm，所以你想要一个动态宽度的collectionview，这意味着即使列表中只有一个字母，collection view 也将始终位于中心。这符合你的想法吗？我也不喜欢固定边距，但可能可以做一些计算来动态设置宽度。
我真的不关心CollectionView的宽度；我想做的就是从中间而不是从左边（或开始）开始放置项目。看起来这要求太多或期望太多:) 目前，我用 FlexLayout 替换了 CollectionView，直到找到更好的解决方案。
一切都好。 Flexlayout 是另一种选择，我只是假设 CollectionView 更适合动态列表。无论如何，祝你好运。
FlexLayout 不是我的第一选择，但可惜我无法让 CollectionView 工作。

【解决方案2】：

我给Datatemplate里面的grid设置了一个固定的宽度，然后将collectionview的WidthRequest绑定到item的数量乘以这个固定的宽度。

 <CollectionView
            x:Name="weatherCollectionView"
            Margin="0"
            Background="Red"
            BackgroundColor="Transparent"
            HorizontalOptions="Center"
            IsVisible="True"
            ItemSizingStrategy="MeasureAllItems"
            ItemsSource="{Binding TripsWeatherCollection}"
            SelectionMode="None"
            WidthRequest="{Binding CollectionViewWidth}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout ItemSpacing="7" Orientation="Horizontal" />
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout
                        Margin="0"
                        Padding="0"
                        VerticalOptions="FillAndExpand"
                        WidthRequest="300">

效果很好，但请确保仅在建立集合后调用它并使用 null 检查。您的固定宽度必须在视图模型中稍大一些，以考虑您的边距或项目间距。

CollectionViewWidth = 310 * TripsWeatherCollection?.Count ?? 0;

【讨论】：

310这个数字从何而来？这是WidthRequest 有一些额外的像素吗？