如何防止 xamarin 表单 ListView 项目重叠？答案

【问题标题】：How can I prevent xamarin form ListView items overlapping?如何防止 xamarin 表单 ListView 项目重叠？
【发布时间】：2019-04-12 14:04:15
【问题描述】：

我目前正在开发一个 Xamarin 项目，该项目显示一些从 API 请求的内容。请求的内容是对象列表，它们将显示在列表视图中。 API 调用正常工作并按预期提供响应。当我在列表视图中显示响应时，它看起来有点乱。

这是我的 Xamarin 表单页面代码（一些内容是硬编码的，以便在进一步开发之前使 UI 保持一致）：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:helper="clr-namespace:WinningQuotes.Helper;assembly=WinningQuotes"
             x:Class="WinningQuotes.Views.QuotesPage"
             Title="Quotes">
    <ContentPage.Content>
        <StackLayout BackgroundColor="LightGray" Padding="0, 0, 0, 10">
            <ListView x:Name="ListQuote" ItemTapped="ListQuote_OnItemTapped" SeparatorVisibility="None" HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout BackgroundColor="LightGray" Padding="10, 10, 10, 0">
                                <Grid RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.25}"
                                      RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.75}"
                                      BackgroundColor="#FFFFFF" ColumnSpacing="0" RowSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>

                                    <StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" BackgroundColor="Brown" Padding="10">
                                        <Label Text="Author" TextColor="#FFFFFF" FontSize="18" />
                                    </StackLayout>

                                    <StackLayout Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Padding="10, 5, 10, 5" Orientation="Horizontal">
                                        <Image Source="{helper:EmbededImage WinningQuotes.Resources.Images.Timeline.png}" Aspect="AspectFill" />

                                        <StackLayout Margin="10, 0, 0, 0" HorizontalOptions="StartAndExpand">
                                            <Label Text="{Binding quote_text}" TextColor="Brown" FontSize="18" />
                                        </StackLayout>
                                    </StackLayout>

                                    <StackLayout Grid.Row="1" Grid.Column="1" Padding="10, 5, 5, 5">
                                        <Label Text="AUTHOR HITS" FontSize="10" TextColor="DarkGray" VerticalOptions="End" />

                                        <Label Text="24" FontSize="18" TextColor="DarkGray" VerticalOptions="End" />
                                    </StackLayout>

                                    <StackLayout Grid.Row="1" Grid.Column="2" Padding="5">
                                        <Label Text="QUOTES HITS" FontSize="10" TextColor="DarkGray" VerticalOptions="End" />

                                        <Label Text="120" FontSize="18" TextColor="DarkGray" VerticalOptions="End" />
                                    </StackLayout>

                                    <StackLayout Grid.Row="1" Grid.Column="3" Padding="5, 5, 10, 5">
                                        <Button Text="Quotes" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" FontSize="10" FontAttributes="None" />
                                    </StackLayout>
                                </Grid>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

当我在 android 模拟器或真正的 android 设备上运行它时，它看起来像这样：

ListView 元素内容重叠，棕色框下方有一些不必要的空间等。如何使此页面看起来一致？

【问题讨论】：

标签： xamarin xamarin.forms xamarin.ios xamarin.android xamarin-studio

【解决方案1】：

您可以在 StackLayout 中使用 Spacing 来分隔子项。我相信将默认边距更改为 this->Margin="10, 0, 0, 0" 是重叠的原因。试试这个方法。希望它有效。

                                    <StackLayout Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Padding="10, 5, 10, 5" Orientation="Horizontal" Spacing="10">
                                      <Image Source="{helper:EmbededImage WinningQuotes.Resources.Images.Timeline.png}" Aspect="AspectFill" />


                                      <Label Text="{Binding quote_text}" TextColor="Brown" FontSize="18" />

                                </StackLayout>

【讨论】：

【解决方案2】：

如果您没有定义 RowHeight 或设置 HasUnevenRows，可能会发生这种情况

<ListView RowHeight="125">

<ListView HasUnevenRows="true">

【讨论】：