You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Maui/Xamarin的ListView中增大列表项间距?

解决ListView列表项间距增大的问题

针对你的需求,以下几种方法可以有效增大ListView项之间的空白间距:

方法1:给自定义项控件添加Margin

直接在CustomItemTextTable控件上设置Margin,Margin控制的是控件外部的间距,这是最直接的调整方式:

<ViewCell>
  <controls:CustomItemTextTable NameText="Name Name"
                                IdentityText="NUMBER IDENTITY"
                                IssuerText="TEST"
                                IssuerOrganisationText="TEST ORG"
                                CreatedText="2022-10-10 20:24"
                                ExpireText="2042-04-06 22:58"
                                StatusText="Inactive"
                                TrustLevelText="3"
                                IsClippedToBounds="False"
                                Margin="0,0,0,15" /> <!-- 给每个项底部添加15单位间距 -->
</ViewCell>

如果需要上下都有间距,可设置为Margin="0,10,0,10"。

方法2:使用ListView的ItemSpacing属性(Xamarin.Forms 5.0+)

若你的项目基于Xamarin.Forms 5.0及以上版本,ListView新增了ItemSpacing属性,直接设置即可统一控制所有项之间的间距:

<ListView ItemsSource="{Binding List, Mode=TwoWay}"
          VerticalOptions="CenterAndExpand"
          HorizontalOptions="CenterAndExpand"
          HasUnevenRows="True"
          WidthRequest="455"
          SeparatorVisibility="Default"
          SeparatorColor="Transparent"
          BackgroundColor="WhiteSmoke"
          IsGroupingEnabled="True"
          ItemSpacing="15"> <!-- 项之间的间距设为15单位 -->
  <!-- 其余代码保持不变 -->
</ListView>

方法3:调整自定义控件的外层布局视觉效果

你当前的CustomItemTextTable中Border的BackgroundColor与ListView背景色一致(均为WhiteSmoke),即使有间距也难以从视觉上区分。可以将Border背景色改为白色,同时给Border添加Margin,让间距更明显:
修改CustomItemTextTable的XAML:

<Border StrokeThickness="0"
        StrokeShape="RoundRectangle 10"
        BackgroundColor="White" <!-- 改为白色,与ListView背景形成对比 -->
        VerticalOptions="FillAndExpand"
        HorizontalOptions="Fill"
        Padding="11"
        Margin="0,0,0,15"> <!-- 底部添加间距 -->
  <!-- 内部Grid代码保持不变 -->
</Border>

额外提示:修复布局错误

你的CustomItemTextTable中,Expire对应的Label设置了Grid.Column="21",这是错误的,应该改为Grid.Column="2",否则该标签会超出Grid范围,影响整体布局:

<Label Grid.Row="5"
       Grid.Column="2" <!-- 修正为正确的列索引 -->
       x:Name="expire"
       />

内容的提问来源于stack exchange,提问作者trenderkyl13

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.02 20:50:24