Question

我正在使用StackLayout和ListView来显示视图的某些部分，但ListView占用的空间比我需要的多，并且在列表的最后一行和配置文件延续之间留下了空白。看来我的ListView有比实际列表长度更多的行，或者它有一个固定的高度，我不知道......这是我的XAML：

<ScrollView>
  <StackLayout Orientation="Vertical" Spacing="10">

    <Label Text="{Binding Establishment.Name}" TextColor="Black" HorizontalOptions="StartAndExpand" Style="{DynamicResource TitleStyle}" FontAttributes="Bold"/>

    <Label Text="{Binding Establishment.Category.Name,  StringFormat='Categoria: {0}'}" TextColor="Black" HorizontalOptions="StartAndExpand"  FontAttributes="Bold"/>

    <Label Text="{Binding Establishment.Description}" TextColor="Black" HorizontalOptions="StartAndExpand" LineBreakMode="WordWrap" XAlign="Start"/>

    <Label Text="Contatos" TextColor="Black" HorizontalOptions="StartAndExpand"  FontAttributes="Bold"/>

    <ListView  ItemsSource="{Binding Establishment.Contacts}" VerticalOptions="Start" HasUnevenRows="True">
      <ListView.ItemTemplate>
        <DataTemplate>
          <TextCell Text="{Binding Value}" Detail="{Binding StringType}" DetailColor="Gray"/>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

    <Label Text="Endereço" TextColor="Black" HorizontalOptions="StartAndExpand"  FontAttributes="Bold"/>

    <Label Text="{Binding Establishment.FullAddress}" TextColor="Black" HorizontalOptions="StartAndExpand"  />

    <Button Text="Ver no mapa"/>

  </StackLayout>
</ScrollView>

我该如何解决？我看到有人使用HasUnevenRows="True"，但它对我不起作用。

Answer 1

首先，Xamarin建议不要在ListView中放置ScrollView，因为它们都提供滚动和相互争斗。我个人试过这个，它经常会导致奇怪的行为，特别是在Android上。

相反，我所做的是将ListView.Header与ListView.HeaderTemplate一起使用，ListView.Footer与ListView.FooterTemplate一起使用。 Xamarin链接here这允许你的确切场景，但没有奇怪的行为问题。如果你想看到一个例子，请告诉我。

如果您必须使用当前版面，则可以尝试查看this帖子，了解ListView如何根据特定Height和{{1}进行调整或Width，因为它不应该符合它的大小。该帖子中有几个解决方案，我还没试过。

在this中发布了一个解决方法，即将LayoutOptions添加到ListView并将其添加到另一个StackLayout。然后将内部StackLayout＆＃39; s StackLayout设置为VerticalOptions。

所以看起来像这样：

LayoutOptions.FillAndExpand

Answer 2

正如 hvaughan3 所说，这真的不是一个好习惯。但我有同样的情况，我使用了行为的解决方法：

public class ListViewHeightBehavior : Behavior<ListView>
{
    private ListView _listView;

    public static readonly BindableProperty ExtraSpaceProperty =
        BindableProperty.Create(nameof(ExtraSpace),
                                typeof(double),
                                typeof(ListViewHeightBehavior),
                                0d);

    public double ExtraSpace
    {
        get { return (double)GetValue(ExtraSpaceProperty); }
        set { SetValue(ExtraSpaceProperty, value); }
    }

    protected override void OnAttachedTo(ListView bindable)
    {
        base.OnAttachedTo(bindable);

        _listView = bindable;
        _listView.PropertyChanged += (s, args) =>
        {
            var count = _listView.ItemsSource?.Count();
            if (args.PropertyName == nameof(_listView.ItemsSource)
                    && count.HasValue
                    && count.Value > 0)
            {
                _listView.HeightRequest = _listView.RowHeight * count.Value + ExtraSpace;
            }
        };
    }
}

XAML：

     <ListView ItemsSource="{Binding Items}"
               HasUnevenRows="True">
      <ListView.Behaviors>
        <behaviors:ListViewHeightBehavior ExtraSpace="180"/>
      </ListView.Behaviors>
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
             // Your template
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

Answer 3

谢谢你们，但没有任何对我有用。我自己认为的解决方案肯定不是最好的解决方案，但它对我有用.....

在XAML，我留下了一个空的StackLayout：

    <StackLayout x:Name="ContactsList" Orientation="Vertical" Spacing="10" Padding="8,0">
      <!-- Empty because it will be filled in code mode -->
    </StackLayout>

然后，在.cs文件中，我在InitializeComponent（）方法之后调用了这个方法：

    private void setUpContacts(Establishment establishment)
    {
        foreach(Contact contact in establishment.Contacts)
        {
            StackLayout row = new StackLayout
            {
                Orientation = StackOrientation.Vertical
            };

            row.Children.Add(new Label
            {
                TextColor = Color.Gray,
                Text = string.Format("{0}:", contact.StringType)
            });

            row.Children.Add(new Label
            {
                TextColor = Color.Black,
                FontAttributes = FontAttributes.Bold,
                Text = contact.Value,
            });

            row.GestureRecognizers.Add(new TapGestureRecognizer {
                Command = new Command(() => OnContactTapped(row, contact))
            });

            ContactsList.Children.Add(row);
        }
    }

我这样做是因为列表不是真正的ListView，因为我不需要直接在列表中滚动函数，它只是视图的另一部分。我认为它不会导致任何性能问题，因为它会有少量项目（最多5个）。我将这个标记为帮助其他人解决此问题的正确答案。

如果这是一个对其他人不起作用的解决方案，请告诉我，我会找到另一种方法来做到这一点。

Answer 4

我对Yehor Hromadskyi的解决方案有疑问。

首先使用IEnumerable没有Count方法。首先必须将其强制转换为IEnumerable
第二，如果您未设置RowHeight，则整个列表将折叠，而您将遇到相反的问题。

这是为解决这些问题而对代码进行的更改

public class ListViewHeightBehavior : Behavior<ListView>
{
    private ListView _listView;

    public static readonly BindableProperty ExtraSpaceProperty =
        BindableProperty.Create(nameof(ExtraSpace),
                                typeof(double),
                                typeof(ListViewHeightBehavior),
                                0d);

    public static readonly BindableProperty DefaultRowHeightProperty =
        BindableProperty.Create(nameof(DefaultRowHeight),
                          typeof(int),
                          typeof(ListViewHeightBehavior),
                          40);

    public int DefaultRowHeight
    {
        get => (int)GetValue(DefaultRowHeightProperty);
        set => SetValue(DefaultRowHeightProperty, value);
    }
    public double ExtraSpace
    {
        get { return (double)GetValue(ExtraSpaceProperty); }
        set { SetValue(ExtraSpaceProperty, value); }
    }

    protected override void OnAttachedTo(ListView bindable)
    {
        base.OnAttachedTo(bindable);

        _listView = bindable;
        _listView.PropertyChanged += (s, args) =>
        {
            var count = _listView.ItemsSource?.Cast<object>()?.Count();
            if (args.PropertyName == nameof(_listView.ItemsSource)
                    && count.HasValue
                    && count.Value > 0)
            {
                int rowHeight = _listView.RowHeight > 0 ? _listView.RowHeight : DefaultRowHeight;
                _listView.HeightRequest = rowHeight * count.Value + ExtraSpace;
            }
        };
    }
}

Answer 5

示例布局显示，您正在ScrollView中使用ListView，并且ListView的子级高度不同(HasUnevenRows="True")

<ScrollView>
     <ListView HasUnevenRows="True">
     </ListView>
</ScrollView>

这会导致列表的最后一行和ScrollView之间出现空白。

由于您已经以根用户身份添加了滚动视图。您可以使用 StackLayout (BindableLayout)出于相同的目的。

<ScrollView>
    <StackLayout
        x:Name="DummyList"
        BindableLayout.ItemsSource="{Binding ContactList}"
        Orientation="Vertical">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <TextCell
                    Detail="{Binding StringType}"
                    DetailColor="Gray"
                    Text="{Binding Value}" />
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ScrollView>

ListView中有比我需要的空间更多的空间

5 个答案: