Xamarin 表单：布局可见性显示/隐藏在 iOS 中不起作用，但在 Android 中起作用

Question

我有一个包含两个堆栈布局的列表。单击需要显示/隐藏第二个堆栈的第一个堆栈。这在 android 中运行良好，但在 iOS 中无法运行。当 IsVisible 为真时，布局不会扩展。

  <ListView ItemsSource="{Binding PackageList}"
                              ItemSelected="Package_ItemSelected"
                              IsPullToRefreshEnabled="true"
                              HasUnevenRows="True" 
                              SeparatorVisibility="None">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="60"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <StackLayout Grid.Row="0" Padding="10" Orientation="Horizontal" Spacing="10" BackgroundColor="#f2f2f2">
                        <Image Source="{Binding Item.PackageType}" VerticalOptions="CenterAndExpand"/>
                        <StackLayout Spacing="5" VerticalOptions="Center">
                            <Label Text="{Binding Item.PackageName}" Style="{DynamicResource LabelStyle}" YAlign="Center"/>
                            <Label Text="(can accept/decline request only)" IsVisible="{Binding Item.PackageType}" Style="{DynamicResource LabelGraySmall}" LineBreakMode="WordWrap" YAlign="Center"/>
                        </StackLayout>
                        <Grid HorizontalOptions="EndAndExpand" >
                            <Image Source="up.png" Style="{DynamicResource ArrowStyle}" IsVisible="{Binding IsVisible}" VerticalOptions="CenterAndExpand"/>
                            <Image Source="downsmall.png" Style="{DynamicResource ArrowStyle}" IsVisible="{Binding IsNotVisible}" VerticalOptions="CenterAndExpand"/>
                        </Grid>
                    </StackLayout>
                    <StackLayout Grid.Row="1" Padding="15" Spacing="10" IsVisible="{Binding IsVisible}">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                        </StackLayout.GestureRecognizers>
                        <Label Text="{Binding Item.Description}" Style="{DynamicResource LabelStyle}" YAlign="Center" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>
                        <Button Text="Choose Package" Command="{Binding Path=BindingContext.PackageCommand,Source={x:Reference packagePage}}" CommandParameter="{Binding Item}" Style="{DynamicResource ButtonBlue}" WidthRequest="200" HeightRequest="40" HorizontalOptions="CenterAndExpand" />
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

后端代码

  private void Package_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {

            if (e.SelectedItem == null) return;
            if (e.SelectedItem != null)
            {
                var tappedItem = (PackageWrapper<PackageResult>)e.SelectedItem;
                tappedItem.IsNotVisible = !tappedItem.IsNotVisible;
                tappedItem.IsVisible = !tappedItem.IsNotVisible;
            }
        ((ListView)sender).SelectedItem = null;
    }

包装类：

    public class PackageWrapper<T> : INotifyPropertyChanged
{
    public T Item { get; set; }
    bool isVisible =  false;
    public bool IsVisible
    {
        get
        {
            return isVisible;
        }
        set
        {
            if (isVisible != value)
            {
                isVisible = value;
                PropertyChanged(this, new PropertyChangedEventArgs("IsVisible"));
            }
        }
    }
    bool isNotVisible = true;
    public bool IsNotVisible
    {
        get
        {
            return isNotVisible;
        }
        set
        {
            if (isNotVisible != value)
            {
                isNotVisible = value;
                PropertyChanged(this, new PropertyChangedEventArgs("IsNotVisible"));
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged = delegate { };
}

详情请看截图

以下是我在 iOS 中得到的内容

以下是 android 中的期望。

Answer 1

我在 iOS 上遇到了同样的问题。

您需要调用 Cell.ForceUpdateSize 让 iOS 调整单元格的大小。

您应该能够在您的代码中执行此操作。比如：

var tappedItem = (PackageWrapper<PackageResult>)e.SelectedItem;
tappedItem.IsNotVisible = !tappedItem.IsNotVisible;
tappedItem.IsVisible = !tappedItem.IsNotVisible;

var viewCell = tappedItem.Parent.Parent as ViewCell;
viewCell.ForceUpdateSize();

我注意到您仅在操作系统为 Android 时才调用该代码。这有什么原因吗？

请注意，这在处理方面很昂贵，并且可能会减慢速度。

Have a look at this example了解更多详情。

Answer 2

更新您的后端代码删除 Device.RuntimePlatform==Device.Android 条件

     private void Package_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {

                if (e.SelectedItem == null) return;
                if (e.SelectedItem != null)
                {
                    var tappedItem = (PackageWrapper<PackageResult>)e.SelectedItem;
                    // ViewModel.PackageList.remove(tappedItem);
tappedItem.IsNotVisible = !tappedItem.IsNotVisible;
                    tappedItem.IsVisible = !tappedItem.IsNotVisible;
                    //ViewModel.PackageList.Add(tappedItem);
                }
            ((ListView)sender).SelectedItem = null;

        }

并将您的堆栈视图放在下面的内容视图中：

    <ContentView VerticalOptions="FillAndExpand" Grid.Row="1" IsVisible="{Binding IsVisible}">
                      <StackLayout Padding="15" Spacing="10" >
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                            </StackLayout.GestureRecognizers>
                            <Label Text="{Binding Item.Description}" Style="{DynamicResource LabelStyle}" YAlign="Center" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>
                            <Button Text="Choose Package" Command="{Binding Path=BindingContext.PackageCommand,Source={x:Reference packagePage}}" CommandParameter="{Binding Item}" Style="{DynamicResource ButtonBlue}" WidthRequest="200" HeightRequest="40" HorizontalOptions="CenterAndExpand" />
                        </StackLayout>
</ContentView>