animation - Xamarin Forms - 如何在 StackLayout 中显示/隐藏项目的动画？

Question

我有一个 Xamarin Forms 跨平台应用程序(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 }
   }
}

然后，我将 TapGestureRecognizer 添加到标题标签，点击时我会切换详细标签的 IsVisible 值。它有效!

我唯一不喜欢的是没有过渡。我单击标题标签，然后“砰”地一声，详细信息标 checkout 现(正确地按下所有以下标签以为自己腾出空间)。我想要一个动画，以便当我单击标题时，标题下方的空间“缓慢”打开以显示详细信息。

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

我不知道如何让 Xamarin 告诉我“详细信息”标签的高度。

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

实现我想要的 UI 的最佳/推荐方法是什么？

Answer 1

您可以使用动画 API。阅读有关它的博客 - Creating Animations with Xamarin.Forms 。

特别是对于您的场景，您可以使用 FadeTo对视觉元素的不透明度属性进行动画处理的方法。

例如:

await image.FadeTo (1, 4000);

有关详细信息，请参阅 Animation .

在你的情况下，我建议的方法是显示标签，将标签的不透明度设置为 0，然后使其可见，然后使用 FadeTo 将不透明度设置为 1。使用相反的方法隐藏标签，通过 FadeTo 设置不透明度 0，然后将 IsVisible 设置为 false。