Swift中Scroll View+Stack View动态按钮及Auto Layout异常求助

问题描述 #

开发iOS应用时，实现了一个水平滚动的Scroll View，内嵌水平UIStackView。默认Stack View为空（spacing设为Standard，Distribution为Fill，尝试Equal Spacing无改善），通过代码动态添加带随机长度标题的按钮，代码如下：

filterStackView.translatesAutoresizingMaskIntoConstraints = false
        
let newButtonConfiguration = UIButton.Configuration.filled()
let newButton = UIButton(configuration: newButtonConfiguration)
newButton.translatesAutoresizingMaskIntoConstraints = false
newButton.setTitle("\(randomString(length: Int.random(in: 5..<25)))", for: .normal)
newButton.setImage(UIImage(systemName: "xmark.circle", withConfiguration: UIImage.SymbolConfiguration(scale: .unspecified)), for: .normal)
newButton.addTarget(self, action: #selector(newButtonPressedAction), for: .touchUpInside)
filterStackView.addArrangedSubview(newButton)

尝试过以下操作但无效果：

• 为按钮调用newButton.sizeToFit() + newButton.layoutIfNeeded()
• 为Stack View调用filterStackView.sizeToFit() + filterStackView.layoutIfNeeded()

出现的异常现象：

• 动态添加的按钮尺寸异常（Storyboard添加按钮时Auto Layout可正常适配文本宽度）
• 多次添加/删除按钮后布局彻底混乱
• 控制台输出约束冲突日志：

2022-11-01 14:05:48.450435+0100 TestAppSideScroll[20626:640959] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600001b58c80 'UISV-canvas-connection' H:[UIButton:0x122408660'N6xoAsl']-(0)-|   (active, names: '|':UIStackView:0x1505080c0 )>",
    "<_UISystemBaselineConstraint:0x600001b586e0 'UISV-spacing' H:[UIButton:0x1223095d0'oHSryjPsjrZA']-(NSLayoutAnchorConstraintSpace(8))-[UIButton:0x122408660'N6xoAsl']   (active)>"
)

Will attempt to recover by breaking constraint 
<_UISystemBaselineConstraint:0x600001b586e0 'UISV-spacing' H:[UIButton:0x1223095d0'oHSryjPsjrZA']-(NSLayoutAnchorConstraintSpace(8))-[UIButton:0x122408660'N6xoAsl']   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

冲突表现为间距约束与画布连接约束矛盾，但并非每次添加按钮都会触发，除间距和Scroll View对齐约束外无其他自定义约束。

解决方案 #

1. 移除按钮的translatesAutoresizingMaskIntoConstraints设置 #

使用UIButton.Configuration创建的按钮，系统会自动管理内部布局约束，手动关闭translatesAutoresizingMaskIntoConstraints会导致按钮自身尺寸约束失效，进而与Stack View的约束冲突。删除以下代码行：

newButton.translatesAutoresizingMaskIntoConstraints = false

2. 修正Stack View在Scroll View中的约束 #

水平滚动场景下，Stack View与Scroll View的正确约束配置应为：

NSLayoutConstraint.activate([
    // Stack View与Scroll View内容区四边对齐
    filterStackView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
    filterStackView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
    filterStackView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
    filterStackView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
    // 固定Stack View高度与Scroll View可视区一致，避免垂直滚动
    filterStackView.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor),
    // 保证内容不足时Stack View填满Scroll View宽度
    filterStackView.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.frameLayoutGuide.widthAnchor)
])

3. 调整Stack View的Distribution属性 #

将Stack View的Distribution设置为Fill或FillProportionally，避免使用Equal Spacing——动态添加不同宽度按钮时，Equal Spacing会强制分配剩余空间，极易引发约束冲突。

4. 添加/删除按钮后触发布局更新 #

在完成按钮添加或删除操作后，调用以下代码确保布局正确刷新：

filterStackView.layoutIfNeeded()
scrollView.layoutIfNeeded()

5. 排查重复约束 #

检查Storyboard中是否为Stack View或按钮设置了多余的固定宽/高约束，这类约束会与Stack View自动生成的布局约束冲突。

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