Visibility vs Offstage vs Opacity，哪个最适合从小部件树中隐藏孩子？

Posted 2023-02-23

【中文标题】Visibility vs Offstage vs Opacity，哪个最适合从小部件树中隐藏孩子？

【英文标题】：Visibility vs Offstage vs Opacity, which is best in hiding a child from widget tree?

【发布时间】：2020-10-02 22:28:18

【问题描述】：

来自this thread，我发现有很多方法可以从树层次结构中隐藏小部件。喜欢使用：

Visibility：

Visibility(
  visible: false,
  child: Foo(),
);

Offstage:

Offstage(
  offstage: true,
  child: Foo(),
);

Opacity：

Opacity(
  opacity: 0,
  child: Foo(),
);

if条件：

if (visible) 
  child

什么不是。

首选哪一个（我知道Visibility 是那个，为什么Visibility），if 条件和Visibility 有什么区别，我如何衡量性能。 Opacity docs 提到：

不透明度比按需从树中添加和删除子小部件更有效。

这是什么意思，是 if 条件吗？如果是，那么if 在这四个中处于什么位置？

【参考方案1】：

不透明度

此选项可将不透明度 (alpha) 设置为您想要的任何值。将其设置为0.0 比将其设置为0.1 稍微不那么明显，所以希望这很容易理解。小部件仍将保持其大小并占据相同的空间，并保持每个状态，包括动画。由于它留下了一个空白，用户仍然可以触摸它或单击它。 （顺便说一句，如果你不想让人们触摸一个不可见的按钮，你可以用 IgnorePointer 小部件包装它。）

台下

这个隐藏了子小部件。您可以将其想象为将小部件放在“屏幕之外”，这样用户就不会看到它。小部件仍然通过颤动管道中的所有内容，直到它到达最后的“绘画”阶段，它根本不绘画任何东西。这意味着它将保留所有状态和动画，但不会在屏幕上呈现任何内容。另外，布局时也不会占用任何空间，不留空隙，用户自然无法点击。

可见性

为了您的方便，这个结合了上述（以及更多）。它具有maintainState、maintainAnimation、maintainSize、maintainInteractivity 等参数。根据您设置这些属性的方式，它会从以下方面决定：

如果你想保持状态，它会用Opacity 或Offstage 包裹孩子，这取决于你是否还想保持大小。此外，除非您想maintainInteractivity，否则它还会为您包装一个IgnorePointer，因为单击透明按钮有点奇怪。

如果你根本不想maintainState，它直接用SizedBox 替换child，所以它完全消失了。您可以使用replacement 属性将空白SizedBox 更改为您想要的任何内容。

删除小部件

如果您不需要维护状态等，通常建议将小部件从树中完全删除。例如，您可以使用if (condition) 来决定是否在列表中包含一个小部件，或者使用condition ? child : SizedBox() 直接将其替换为SizedBox。这样可以避免不必要的计算，并且最适合性能。

【讨论】：

这个答案确实清除了我关于使用If 条件并添加SizedBox() 作为树中所需小部件的替代方案的想法。

【参考方案2】：

我认为上面的答案非常有用且清晰。关于使用条件方式，我介绍两种非常有用的方式：

condition ? child : SizedBox() 要么 if (condition) child 如果您使用至少 2.3.0 的 dart 版本

查看更多https://github.com/flutter/flutter/issues/3783

【讨论】：

您好，您只是想在此处添加条件部分吗？谢谢，但这不是问题所在。