增加 ListView、Maui/Xamarin 中项目之间的间距

Question

我正在尝试使用自定义 ItemTemplate 创建一个简单的 ListView，它由一个带有一些信息的网格组成。 ListView 中的每个项目都应该有比默认更大的空间。 我试过乱用边距/填充，但似乎无法在项目之间创建更大的空间。 有没有人有任何提示如何在 ListView 中的项目之间实现更大的空白？ 从我在网上和文档中发现的内容来看，似乎缺乏。 但肯定有一些我遗漏的东西，因为这应该是 ListView 的一个非常明显的用例。

用户看到的xaml页面中的代码：

<ListView ItemsSource="{Binding List, Mode=TwoWay}"
          VerticalOptions="CenterAndExpand"
          HorizontalOptions="CenterAndExpand"
          HasUnevenRows="True"
          WidthRequest="455"
          SeparatorVisibility="Default"
          SeparatorColor="Transparent"
          BackgroundColor="WhiteSmoke"
          IsGroupingEnabled="True"
          >
    <ListView.ItemTemplate >
        <DataTemplate>
            <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"
                                            />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

CustomItemTextTable 中的代码

<Border StrokeThickness="0"
        StrokeShape="RoundRectangle 10"
        BackgroundColor="WhiteSmoke"
        VerticalOptions="FillAndExpand"
        HorizontalOptions="Fill"
        Padding="11"
        >
 
    <Grid ColumnDefinitions="155,10,171"
          RowDefinitions="*,*,*,*,*,*,*,*"
          Padding="0,0,0,0"
          >
        <Label Text="Name"
               Grid.Row="0"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Identity"
               Grid.Row="1"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Issuer"
               Grid.Row="2"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Issuer org"
               Grid.Row="3"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Created"
               Grid.Row="4"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Expire"
               Grid.Row="5"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="Status"
               Grid.Row="6"
               Grid.Column="0"
               HorizontalOptions="End"
               />
        <Label Text="TrustLevel"
               Grid.Row="7"
               Grid.Column="0"
               HorizontalOptions="End"
                         />
        <Label Grid.Row="0"
               Grid.Column="2"
               x:Name="name"
               />
        <Label Grid.Row="1"
               Grid.Column="2"
               x:Name="identity"
               />
        <Label Grid.Row="2"
               Grid.Column="2"
               x:Name="issuer"
               />
        <Label Grid.Row="3"
               Grid.Column="2"
               x:Name="issuerOrg"
               />
        <Label Grid.Row="4"
               Grid.Column="2"
               x:Name="created"
               />
        <Label Grid.Row="5"
               Grid.Column="21"
               x:Name="expire"
               />
        <Label Grid.Row="6"
               Grid.Column="2"
               x:Name="status"
               />
        <Label Grid.Row="7"
               Grid.Column="2"
               x:Name="trustLevel"
               />
    </Grid>

任何帮助/提示将不胜感激......

我尝试在两个 Xaml 页面中增加 Padding/Margin。

Answer 1

重要提示：您不会显示 CustomItemTextTable 的前几行 xaml -
定义x:Class的 header 元素。 删除那里的任何BackgroundColor ，或将其更改为明显的颜色，例如“HotPink”，以查看它是否填充了您试图“显示出来”的区域。

---

XAML 没有给 LayoutManager 足够的信息来做你想做的事：

• 您已经告诉 Grid 使所有行都具有相同的高度 ( * )，但没有说明总高度。
• 然后你要求一个Margin ，但它取自分配给项目的默认总高度。

最安全的解决方案是显式请求高度。 使其足够大以包含所需的边距：

<CustomItemTextTable HeightRequest="210" Margin="0,0,0,10" ... />

注意：HeightRequest 和/或 Margin 的另一个位置在自定义视图的 header 中：

<SomeUIClass
  xmlns:...
  x:Class="...CustomItemTextTable"
  HeightRequest="210"      <-- these can be above x:Class property if you prefer.
  Margin="0,0,0,10"
/>

如果这不能解决问题，请删除该边距。 相反，在项目中添加一个透明区域。 从而让后面的颜色显露出来。 有多种方法可以做到这一点。 这是一个：

<StackLayout
  <Border ...    <-- your existing code
  </Border>
  <BoxView HeightRequest="10" />
</StackLayout>