为何UIStackView与UIScrollView中的UIView列表无法显示且滚动失效？

核心问题点 #

1. ScrollView 内部 StackView 约束缺失
   ScrollView 的子视图必须明确自身尺寸或与 ScrollView 建立清晰的尺寸关联，否则 ScrollView 无法计算 contentSize，导致内容无法显示或无法滚动。你的代码中 StackView 只绑定了上下左右锚点，但没有设置宽度约束，ScrollView 无法确定横向内容范围，同时 StackView 的高度也无法被正确计算。

2. ListItem 宽度约束错误
   在 viewDidLoad 阶段，视图还未完成布局，stackView.frame.width 的值是不确定的（大概率为 0），用这个值作为 ListItem 的宽度常量会导致 ListItem 宽度为 0，自然无法显示。另外，垂直方向的 StackView 且 alignment = .fill 时，子视图会自动匹配 StackView 的宽度，无需手动设置宽度约束。

3. 不必要的初始化参数
   StackView 初始化时传入 scrollView.frame 毫无意义，因为后续会设置 translatesAutoresizingMaskIntoConstraints = false，AutoLayout 会完全接管布局，初始 frame 会被忽略。

修正后的代码 #

import UIKit

class EventsListViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        scrollView.backgroundColor = .gray
        
        // 绑定 ScrollView 到父视图安全区
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
        ])
        
        // 初始化 StackView 无需传入 frame
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(stackView)
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.alignment = .fill
        stackView.spacing = 5
        
        // 给 StackView 添加关键约束：宽度与 ScrollView 一致，绑定上下左右锚点
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            // 关键：让 StackView 宽度等于 ScrollView 宽度，固定横向内容范围
            stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
        
        // 用可选绑定避免强制解包崩溃
        guard let events = location.myEvents else { return }
        for event in events {
            let listItem = UIView()
            listItem.layer.name = event.eventID
            listItem.backgroundColor = .blue
            stackView.addArrangedSubview(listItem)
            
            // 只需设置高度约束，宽度由 StackView 自动控制
            listItem.translatesAutoresizingMaskIntoConstraints = false
            NSLayoutConstraint.activate([
                listItem.heightAnchor.constraint(equalToConstant: 35)
            ])
        }
    }
}

额外优化建议 #

• 避免强制解包 location.myEvents!，使用可选绑定 guard let 或 if let 提高代码安全性。
• 移除 StackView 的 contentMode 属性，该属性对 AutoLayout 驱动的 StackView 布局没有影响。
• 如果需要支持横向滚动，可以移除 StackView 的宽度约束，但此时需要确保 ListItem 有明确的宽度值。

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