.NET MAUI中CollectionView设为HorizontalList时如何设置项间距

要解决水平布局下CollectionView项间距不生效的问题，最直接且官方的方式是显式使用LinearItemsLayout并设置ItemSpacing属性，而非依赖项内控件的Margin。

解决方案1：使用LinearItemsLayout的ItemSpacing（推荐） #

将原来简写的ItemsLayout="HorizontalList"替换为完整的LinearItemsLayout定义，通过ItemSpacing直接控制项之间的水平间距：

<CollectionView
   ItemsSource="{Binding MyOptions}"
   HeightRequest="30">
   <!-- 替换为显式的LinearItemsLayout，设置方向和间距 -->
   <CollectionView.ItemsLayout>
       <LinearItemsLayout Orientation="Horizontal" ItemSpacing="5" />
   </CollectionView.ItemsLayout>
   <CollectionView.ItemTemplate>
      <DataTemplate
         x:DataType="itemoption:MyModel">
       <Border
            BackgroundColor="{StaticResource Gray}"
            StrokeShape="RoundRectangle 3"
            Padding="10">
            <Label
               Text="{Binding Name}"
               TextColor="{StaticResource Black}"
               FontSize="11"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
         </Border>
      </DataTemplate>
   </CollectionView.ItemTemplate>
</CollectionView>

这种方式的优势：

• 统一控制所有项间距，无需逐个修改项内控件
• 仅在相邻项之间添加间距，不会给首尾项带来多余边距

解决方案2：通过容器控件的Margin实现（备选） #

如果坚持用Margin方式，需要给Border外层套一个ContentView（或其他布局容器），再给容器设置Margin——直接给Border加Margin可能会被CollectionView的项容器忽略：

<CollectionView
   ItemsSource="{Binding MyOptions}"
   ItemsLayout="HorizontalList"
   HeightRequest="30">
   <CollectionView.ItemTemplate>
      <DataTemplate
         x:DataType="itemoption:MyModel">
         <!-- 外层套ContentView，设置右边距 -->
         <ContentView Margin="0,0,5,0">
             <Border
                  BackgroundColor="{StaticResource Gray}"
                  StrokeShape="RoundRectangle 3"
                  Padding="10">
                  <Label
                     Text="{Binding Name}"
                     TextColor="{StaticResource Black}"
                     FontSize="11"
                     FontAttributes="Bold"
                     HorizontalTextAlignment="Center"
                     VerticalTextAlignment="Center" />
             </Border>
         </ContentView>
      </DataTemplate>
   </CollectionView.ItemTemplate>
</CollectionView>

注意：这种方式会给最后一项也添加右边距，若需避免，需额外通过绑定或转换器判断是否为最后一项来控制Margin。

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