UIStackView中UIPickerView点击按钮展开/收起动画实现问题

我明白你的困扰——直接设置isHidden确实会让PickerView在动画结束后突然消失，这是因为UIStackView会把隐藏的视图直接从布局系统中移除，不会给它过渡的空间。咱们换两种更靠谱的方式来实现平滑的展开收起效果：

方法一：通过高度约束实现渐变动画 #

这种方式是控制PickerView的高度从0过渡到默认高度（UIPickerView的默认高度是216pt），视觉上会有平滑的展开/收起效果：

步骤1：提前准备约束 #

首先在你的类中定义PickerView和它的高度约束：

private let pickerView = UIPickerView()
private var pickerHeightConstraint: NSLayoutConstraint!

步骤2：初始化PickerView并添加到StackView #

在初始化时把PickerView加入StackView，同时设置初始高度为0（收起状态）：

func setupPickerView() {
    pickerView.translatesAutoresizingMaskIntoConstraints = false
    self.addArrangedSubview(pickerView)
    // 设置初始高度为0，默认收起
    pickerHeightConstraint = pickerView.heightAnchor.constraint(equalToConstant: 0)
    pickerHeightConstraint.isActive = true
}

步骤3：按钮点击触发动画 #

在按钮的点击方法中，切换高度约束的值并执行动画：

@IBAction func togglePicker(_ sender: UIButton) {
    // 切换目标高度：当前是0则展开到216，否则收起为0
    let targetHeight = pickerHeightConstraint.constant == 0 ? 216 : 0
    
    pickerHeightConstraint.constant = targetHeight
    
    UIView.animate(withDuration: 0.3, animations: { [unowned self] in
        // 强制更新布局，让动画生效
        self.layoutIfNeeded()
    }, completion: { [unowned self] finished in
        // 动画结束后，可选设置isHidden来完全禁用PickerView的交互（收起时）
        if targetHeight == 0 {
            self.pickerView.isHidden = true
        } else {
            self.pickerView.isHidden = false
        }
    })
}

方法二：动态添加/移除StackView的Arranged子视图 #

UIStackView会自动管理ArrangedSubview的布局，我们可以在动画块中动态添加或移除PickerView，配合布局更新实现动画：

步骤1：准备PickerView和状态标记 #

private let pickerView = UIPickerView()
private var isPickerExpanded = false

步骤2：按钮点击触发动画 #

@IBAction func togglePicker(_ sender: UIButton) {
    isPickerExpanded.toggle()
    
    UIView.animate(withDuration: 0.3) { [unowned self] in
        if isPickerExpanded {
            // 展开：添加到StackView的Arranged子视图中
            self.addArrangedSubview(self.pickerView)
            // 给PickerView设置固定高度，避免布局异常
            self.pickerView.heightAnchor.constraint(equalToConstant: 216).isActive = true
        } else {
            // 收起：从父视图移除
            self.pickerView.removeFromSuperview()
        }
        // 更新布局，触发动画
        self.layoutIfNeeded()
    }
}

关键注意事项 #

• 务必设置pickerView.translatesAutoresizingMaskIntoConstraints = false，否则自定义约束不会生效。
• 不要在动画块中直接设置isHidden，这会打断动画过渡，最好在动画完成的回调中处理。
• UIStackView的动画核心是触发布局更新，所以动画块中必须调用layoutIfNeeded()，让系统把布局变化转化为动画。

内容的提问来源于stack exchange，提问作者eja08