如何让内置含UILabel与UIImage的UIStackView的View实现滚动？

云上老周

2026-10-3

UILabel超出安全区、UIScrollView不生效问题解决方案

第一步：校准UIScrollView约束逻辑
UIScrollView的滚动依赖内容区和自身尺寸的差值，要实现正常滚动必须做两层约束：
- 外层约束：将UIScrollView的上下左右四个边全部约束到当前控制器视图的安全区，确定ScrollView自身的可视范围。
- 内容层约束：将嵌套了所有控件的UIStackView放到ScrollView内部，把StackView的四个边约束到ScrollView的「Content Layout Guide」的四个边，同时添加StackView宽度等于ScrollView「Frame Layout Guide」宽度的约束，高度不做固定限制，让StackView可以根据内部内容自动撑开高度。
第二步：配置UILabel的自动换行属性
长文本默认会让UILabel横向撑开，修改对应Label的属性即可避免横向超出：
- 选中第二个UILabel，将numberOfLines属性设置为0，lineBreakMode设置为按单词换行，文本超出单行宽度后会自动向下换行，不会横向撑开StackView。
- 如果其他Label也可能出现长文本，做同样的配置即可。
可选配置：如果不需要垂直滚动，只是希望Label换行不超出安全区，可以不用添加UIScrollView，直接把UIStackView的四个边约束到安全区，同时配置Label的自动换行属性即可。

如果使用纯代码实现，参考示例代码如下：

// 各控件的初始化逻辑此处省略
scrollView.translatesAutoresizingMaskIntoConstraints = false
targetStackView.translatesAutoresizingMaskIntoConstraints = false
secondLabel.translatesAutoresizingMaskIntoConstraints = false

// 激活约束
NSLayoutConstraint.activate([
    // ScrollView绑定安全区
    scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
    scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
    scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
    // StackView绑定ScrollView内容区
    targetStackView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor, constant: 16),
    targetStackView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor, constant: 16),
    targetStackView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor, constant: -16),
    targetStackView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor, constant: -16),
    // 固定StackView宽度和ScrollView可视宽度一致
    targetStackView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor, constant: -32)
])

// 配置长文本Label
secondLabel.numberOfLines = 0
secondLabel.lineBreakMode = .byWordWrapping

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