Animation Xamarin表单-如何在StackLayout中设置显示/隐藏项目的动画？

我有一个Xamarin表单跨平台应用程序（iOS和Android），在其中一个屏幕上我想要一个包含详细信息的列表：

Heading 1
   Detail 1
   Detail 2
   Detail 3
Heading 2
   Detail 1
Heading 3
   Detail 1
   Detail 2

如您所见，每个标题下的详细信息量是可变的

我希望页面首先只显示标题：

Heading 1
Heading 2
Heading 3

然后，当用户按下某个标题时，会显示该特定标题的详细信息。相当标准的东西

我尝试了几种不同的方法来实现这一点，唯一对我开放的途径是使用StackLayout，在其中我定义了一组标签：

new StackLayout
{
   Orientation = StackOrientation.Vertical,
   Children = 
   {
      new Label { Text = "Heading 1" },
      new Label { Text = "   Detail 1\n   Detail 2\n   Detail 3", IsVisible = false },
      new Label { Text = "Heading 2" },
      new Label { Text = "   Detail 1", IsVisible = false },
      new Label { Text = "Heading 3" },
      new Label { Text = "   Detail 1\n   Detail 2", IsVisible = false }
   }
}

然后，我将TapGestureRecognitor添加到标题标签，当点击时，我将切换细节标签的IsVisible值。它起作用了

我唯一不喜欢的是，没有过渡。我点击标题标签，然后BAM细节标签出现（正确按下以下所有标签，为自己留出空间）。我想要一个动画，这样当我点击标题，标题下的空间“慢慢”打开，以显示细节

当我在线阅读有关动画的内容时，一种可能是将细节标签的HeightRequest设置为零（而不是使用IsVisible=false隐藏它们），然后创建一个动画，“缓慢”将HeightRequest从零更改为标签的实际高度。这就是我遇到问题的地方

我不知道如何让Xamarin告诉我“细节”标签的高度

如果我在创建详细信息标签后立即检查其Height和HeightRequest属性，它们都是-1（这并不奇怪）。如果在单击标题时检查这两个相同的属性，它们仍然是-1。我发现获取详细标签高度的唯一方法是将详细标签设置为可见，在堆栈布局上调用ForceLayout（），存储详细标签高度，然后再次将详细标签设置为不可见。问题是，在我这样做的时候，我有时会看到细节标签闪烁一瞬间

---

实现所需UI的最佳/推荐方法是什么？

您可以使用动画API。 阅读有关它的博客-

特别是对于您的场景，您可以使用该方法为视觉元素的不透明度属性设置动画

例如：

有关详细信息，请参阅

在您的例子中，我建议的方法是显示标签，将标签的不透明度设置为0，然后使其可见，然后使用FadeTo将不透明度设置为1。

---

使用反面隐藏标签，通过FadeTo将不透明度设置为0，然后将IsVisible设置为false

如果我正确理解您的问题，您唯一需要的是避免标签上的闪烁，如果是这种情况，则可以将不透明度设置为0，这样，在您再次将不透明度设置为1之前，标签将不可见。

我可以建议您制作一个自定义XF控件（用作项目数据模板），如下所示：

2个垂直部分：

• 标题部分（A）（当您单击它时，它将显示第二部分）
• 第二部分是一个“Listview”控件（B），该控件开头为空

当您单击（A）时：

• 它将显示（B）
• 它将开始用您的详细信息元素填充（B）

我想的诀窍是实现一种方法，逐项填充listview（B）（从viewmodel获取它们），每次插入之间有一定的延迟（几毫秒），同时可能还有“fadeTo”效果

你可以在这里看到我的意思（参见“淡入”部分））：

您可以根据需要改进模板，例如将两部分嵌入到“边框”中，以进行图形分隔

如果不清楚，请告诉我，你所需要的只是时间：）

---

如果你准备好了，你可以尝试制作本机控件/动画

这不是预期的答案。。。我猜@Betty正在寻找一种“ExpandTo”方法，而不是“FadeTo”。。。

await image.FadeTo (1, 4000);