如何用MAUI C#实现多列列表？解决CollectionView显示异常问题

问题拆解 #

你碰到的两个核心问题：

• 列表项上方的小方块：是开启SelectionMode="Multiple"后默认显示的选择指示器
• 项间大量空白：由CollectionView默认内边距、未自定义项模板导致的布局冗余，加上ItemsLayout参数未优化共同造成

具体解决步骤 #

1. 移除选择小方块 #

直接隐藏默认指示器（.NET MAUI 7及以上版本支持），或者通过自定义项模板替代默认布局，默认选择指示器就不会显示了。

2. 消除无效空白 #

• 给CollectionView添加Padding="0"，去掉默认内边距
• 确保GridItemsLayout的VerticalItemSpacing和HorizontalItemSpacing都设为0
• 自定义项模板时，内部元素不要设置多余的Margin或Padding

完整XAML代码示例 #

<CollectionView BackgroundColor="MistyRose" 
                x:Name="collectionView" 
                VerticalOptions="Start" 
                ItemSizingStrategy="MeasureFirstItem" 
                SelectionMode="Multiple"
                Padding="0"
                SelectionIndicatorVisibility="Collapsed"> <!-- 隐藏默认选择指示器 -->
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" 
                         Span="8" 
                         VerticalItemSpacing="0" 
                         HorizontalItemSpacing="0" />
    </CollectionView.ItemsLayout>
    <!-- 自定义每个列表项的布局，替换默认模板 -->
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <!-- 根据你的数据模型绑定对应属性，示例用Label展示文本 -->
            <ContentView BackgroundColor="White" 
                         Margin="0" 
                         Padding="3"> <!-- 可按需微调内边距，避免留白 -->
                <Label Text="{Binding YourDisplayProperty}" 
                       HorizontalOptions="Center" 
                       VerticalOptions="Center" 
                       FontSize="Small" />
            </ContentView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

额外优化提示 #

• 若要让列数自适应屏幕宽度，可在后台代码计算Span值（根据屏幕宽度和单个项宽度计算），再绑定到GridItemsLayout的Span属性
• 如果每个项大小固定，将ItemSizingStrategy改为FixedSize并指定ItemWidth和ItemHeight，既能消除空白，还能提升列表性能
• 如需保留多选视觉反馈，可在项模板中通过IsSelected绑定修改样式（比如选中时切换背景色），需要先自定义一个布尔转颜色的转换器：

  <ContentView BackgroundColor="{Binding IsSelected, Converter={StaticResource SelectedColorConverter}}" ...>
  

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