Как я могу предотвратить наложение элементов ListView формы xamarin? - PullRequest
Новая
       36

Как я могу предотвратить наложение элементов ListView формы xamarin?

0 голосов
/ 09 ноября 2018

В настоящее время я работаю над проектом Xamarin, который отображает некоторый контент, запрашивающий у API.Запрашиваемое содержимое представляет собой список объектов, и они будут отображаться в виде списка.Вызов API работает правильно и выдает ответы, как и ожидалось.Когда я отображаю ответ в виде списка, он выглядит немного неопрятно.

Это мой код страницы формы Xamarin ( Некоторое содержимое жестко запрограммировано для обеспечения согласованности пользовательского интерфейса перед дальнейшей разработкой ): 

<?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, это выглядит так:

enter image description here

Элемент ListViewсодержимое пересекается, а под коричневой рамкой и т. д. имеется некоторое ненужное пространство и т. д. Как мне сделать эту страницу похожей?

Ответы [ 2 ]

0 голосов
/ 29 мая 2019

Это может случиться, если вы не определили RowHeight или не установили HasUnevenRows

<ListView RowHeight="125">

<ListView HasUnevenRows="true">

0 голосов
/ 09 ноября 2018

Вы можете использовать Spacing в StackLayout для разделения детей. Я считаю, что изменение поля по умолчанию на 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>
...