Xamarin Forms - ListView 中的 iOS 动态 ViewCell 大小答案

【问题标题】：Xamarin Forms - iOS dynamic ViewCell size in a ListViewXamarin Forms - ListView 中的 iOS 动态 ViewCell 大小
【发布时间】：2017-01-20 18:08:44
【问题描述】：

以下 XF 应用程序（下面的代码）创建一个简单的 ListView，其中包含 2 个自定义单元格。点击一个单元格会使用 IsVisible 属性来显示第二个标签。

在 Android 上，这很有效，因为 ViewCell 的大小会调整大小以适应当前显示的内容。当 Detail 项可见时，ViewCell 会展开以显示详细信息。

在 iOS 上，这不起作用。

这是应用在首次启动时的显示方式...

当您点击第一个 ViewCell 时，IsVisible 属性被触发并显示 Detail 项。但是，ViewCell 保持相同的高度，导致它溢出，如下所示...

这在 iOS 端如何实现？

这里是代码...

XAML

  <ContentPage.Content>
    <ListView x:Name="___list" Margin="50" HasUnevenRows="True">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout>
              <StackLayout.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding CellTap}" />
              </StackLayout.GestureRecognizers>
              <Label Text="{Binding Title}" />
              <Label Text="{Binding Detail}" FontSize="30" IsVisible="{Binding ShowDetails}" />
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </ContentPage.Content>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        ___list.ItemsSource = new List<Element>() {
                new Element() {
                    Title="First Element",
                    Detail = "First Element Details"
                },
                new Element() {
                    Title="Second Element",
                    Detail = "Second Element Details"
                }
            };
    }
}
public class Element : INotifyPropertyChanged
{
    public Element()
    {
        CellTap = new Command(() =>
        {
            ShowDetails = !ShowDetails;
        });
    }

    public ICommand CellTap { get; private set; }

    private string _title;
    public string Title
    {
        get { return _title; }
        set { if (_title != value) { _title = value; OnPropertyChanged("Title"); } }
    }
    private string _detail;
    public string Detail
    {
        get { return _detail; }
        set { if (_detail != value) { _detail = value; OnPropertyChanged("Detail"); } }
    }
    private bool _showDetails;
    public bool ShowDetails
    {
        get { return _showDetails; }
        set { if (_showDetails != value) { _showDetails = value; OnPropertyChanged("ShowDetails"); } }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

【问题讨论】：

标签： c# xamarin xamarin.ios xamarin.forms

【解决方案1】：

ViewCell 无法自动找出它应该有多高。您必须通过设置它的Height 来支持它或强制它更新。不幸的是，Height不可绑定。

选项 1：如果每行有不同的高度并且列表无法确定正确的高度，请使用此选项。

class CustomViewCell : ViewCell
{
  protected override void OnBindingContextChanged()
  {
    base.OnBindingContextChanged();
    // Do some calculation in here to get the height you need.
    // Here we are using an example that bases the size on the result of ToString()
    string text = BindingContext.ToString();
    Height = 10 + ((int)(text[0]) - 65);
  } 
}

选项 2：动态改变高度（可能是你想要的）

void SomeEventHandler(object sender, EventArgs args)
{
   // Let's assume an image was tapped...
   var image = sender as Image;
   // ...and the image is in a cell.
   var viewCell = image.Parent.Parent as ViewCell;

   // You would FIRST change the height of the content (in this case the image)
   if (image.HeightRequest < 250)
   {
       image.HeightRequest = image.Height + 100;
       // And THEN tell the cell to update (Note: you should not be required
       // to subclass the cell)
       viewCell.ForceUpdateSize();
   }
}

请确保HasUnevenRows = true，否则强制更新无效。

【讨论】：