在 UIStackView 中动画隐藏子视图超出屏幕

Question

我正在尝试为隐藏 UIStackView 的排列子视图设置动画：

UIView.animate(withDuration: 3, delay: 0) {
    self.stackView.subviews.forEach({ [=10=].isHidden = true })
    self.stackView.updateConstraintsIfNeeded()
    self.stackView.layoutIfNeeded()
    self.view.layoutIfNeeded()
} completion: { (_) in
    self.children.forEach({ [=10=].removeFromParent() })
    completion()
}

问题是视图在设置动画时会在屏幕上扩展宽度（超出屏幕边界）。

视图是这样设置的：

scrollView = {
    let scrollView = UIScrollView()
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    return scrollView
}()

stackView = {
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.distribution = .fill
    stackView.translatesAutoresizingMaskIntoConstraints = false
    
    return stackView
}()

contentView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

contentView.addSubview(stackView)
scrollView.addSubview(contentView)
view.addSubview(scrollView)

scrollView.showsVerticalScrollIndicator = false
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

contentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true

stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 20).isActive = true
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20).isActive = true
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20).isActive = true
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -50).isActive = true

问题：我怎样才能让它在动画过程中不改变宽度？

Answer 1

我不知道这是 UIStackView 的一个奇怪问题还是它有某种用途，但是：将“隐形”UIView 放入您的 UIStackView 将会解决问题。标记它，以便在隐藏其他元素时它仍然可见：

let imposterView = UIView()
imposterView.tag = 999
stackView.addArrangedSubview(imposterView)

当然要相应地处理你的隐藏逻辑：

stackView.subviews.forEach({
     if [=11=].tag != 999 {
         [=11=].isHidden = true
     }
})

在 UIStackView 中动画隐藏子视图超出屏幕

Animating Hiding Subviews in UIStackView goes out of screen

ios

swift

uiview

uiviewanimation