ios - 将 Image 设置为 Nil 会导致 ImageView 在堆栈 View 中消失

Question

我最近将一堆 UIImageView 移动到嵌套的堆栈 View (水平和垂直)中。每当用户按下播放按钮时，它就会产生动画，然后启动计时器。一旦计时器达到 0，就应该连续翻转每张卡片并隐藏图像本身。在我将它们添加到堆栈 View 之前，这是有效的。我读过，当涉及到这类事情时，堆栈 View 是有问题的，但迄今为止任何修复它的尝试都没有奏效。我陷入了僵局，有人能指出我正确的方向吗？

我认为问题发生在这里

//INFO: Disable cards while viewing.
for card in cardsPhone
{
    card.isUserInteractionEnabled = false
    flipCard(sender: card)
}



DispatchQueue.global(qos: .default).asyncAfter(deadline: .now() + 5) {

    for card in self.cardsPhone
    {
        DispatchQueue.main.async {

            //THIS IS THE ANIMATION CALL THAT MAKES VIEWS DISAPPEAR.
            self.flipCard(sender: card)

        }
        usleep(20000)
    }

    DispatchQueue.main.async{
        //INFO: Enable cards after hidden.
        for card in self.cardsPhone
        {
            card.isUserInteractionEnabled = true
        }

        //INFO: Enable play button after cards are hidden to prevent crashing layout.
        self.playButtonView.isUserInteractionEnabled = true
    }
}

翻转动画 Controller

func flipCard(sender: UIImageView)
{
    playButtonView.isUserInteractionEnabled = false

    //INFO: If there is no UIImage, assign the appropriate image from the array.
    if sender.image == nil
    {
        sender.image = cardsImages[sender.tag]
        UIView.transition(with: sender, duration: 0.3, options: .transitionFlipFromLeft, animations: nil, completion: nil)
    }
    //INFO: If there is an image, remove it and replace with no Image.
    else
    {
        sender.image = nil
        UIView.transition(with: sender, duration: 0.3, options: .transitionFlipFromRight, animations: nil, completion: nil)
    }
}

更新

我发现，如果我替换 UIImageView 上的图像，那么这实际上就是导致它消失的原因。因此，问题与上面的 else 语句中的代码有关，其中 sender.image = UIImage()。无论我是否替换为不同的图像，图像一旦更改它就会消失。

Answer 1

I've read that the stack views are buggy when it comes to this sort of thing

嗯，事实并非如此。事实上，它们非常复杂且一致，而且它们的行为也有明确的定义。

什么是堆栈 View ？它是自动布局约束的构建器。仅此而已。将 View 放入堆栈 View 中意味着“请使用您施加的自动布局约束以相等的间距配置这些 View ”(或堆栈 View 的任何设置)。

好的，但是堆栈 View 是如何做到这一点的呢？自动布局需要四项信息:x 和 y 位置以及宽度和高度。堆栈 View 将提供位置，但是其 View 的大小(宽度和高度)又如何呢？好吧，告诉它的一种方法是为您的 View 提供内部约束(如果它们与堆栈 View 将执行的其他操作不冲突)。但在没有这种情况下，它必须使用其 View 的内在大小。自动布局下 ImageView 的内在大小是它包含的图像的大小。

因此，当您的 ImageView 具有相同大小的图像时，一切都很好。它们都具有相同的内在大小，现在堆栈 View 可以将它们分开。但随后你拿走了 ImageView 的图像。现在它没有图像。所以它没有内在的大小。因此，堆栈 View 只是将其从行(或列或其他任何内容)中删除。

你的解决方法实际上是一个很好的方法，即确保 ImageView 始终有图像；如果它看起来是空白的，你只需给它一个空白图像。该图像看起来像背景，但它仍然是具有实际尺寸的图像，因此它为 ImageView 提供了尺寸，并且 ImageView 继续保持其位置。

然而，另一种解决方案是简单地为 ImageView 提供与卡片图像宽度相同的宽度约束。