ScrollView内ContentView不显示问题排查求助

红色的ContentView始终无法在紫色的ScrollView中显示，尝试过将ContentView改为lazy var、添加为ScrollView子视图、在ContentView内加入UIStackView等操作，均未解决问题。

初始代码（FindEmployeeJobRequestController） #

// MARK: - Properties

lazy var jobInfoCardView: ShadowCardView = {
   let view = ShadowCardView()
   view.backgroundColor = .white
   view.addShadow()
   view.setHeight(height: 320)
   return view
}()
    
let scrollView: UIScrollView = {
   let sv = UIScrollView()
   sv.backgroundColor = .darkPurpleTint
   sv.isScrollEnabled = true
   return sv
}()
    
let contentView: UIView = {
   let view = UIView()
   view.backgroundColor = .red
   return view
}()

// MARK: - Helper Functions

fileprivate func configureUI() {

        view.addSubview(jobInfoCardView)
        jobInfoCardView.anchor(top: circularProgressView.bottomAnchor, left: view.leftAnchor, right: view.rightAnchor,
                               paddingTop: 52, paddingLeft: 24, paddingRight: 24)
        
        jobInfoCardView.addSubview(scrollView)
        scrollView.anchor(top: jobInfoCardView.topAnchor, left: jobInfoCardView.leftAnchor,
                          bottom: jobInfoCardView.bottomAnchor, right: jobInfoCardView.rightAnchor,
                          paddingTop: 4, paddingLeft: 4, paddingBottom: 4, paddingRight: 4)
        
        jobInfoCardView.addSubview(contentView)
        contentView.anchor(top: scrollView.contentLayoutGuide.topAnchor, left: scrollView.contentLayoutGuide.leftAnchor,
                           bottom: scrollView.contentLayoutGuide.bottomAnchor, right: scrollView.contentLayoutGuide.rightAnchor)
        contentView.anchor(left: scrollView.frameLayoutGuide.leftAnchor, right: scrollView.frameLayoutGuide.rightAnchor)

}

更新尝试 #

将ContentView改为ScrollView的子视图，并在ContentView内添加UIStackView，问题依旧。

更新后代码 #

fileprivate func configureUI() {

        scrollView.addSubview(contentView)
        contentView.anchor(top: scrollView.contentLayoutGuide.topAnchor, left: scrollView.contentLayoutGuide.leftAnchor,
                           bottom: scrollView.contentLayoutGuide.bottomAnchor, right: scrollView.contentLayoutGuide.rightAnchor)
        contentView.anchor(left: scrollView.frameLayoutGuide.leftAnchor, right: scrollView.frameLayoutGuide.rightAnchor)
        
        waitingOnEmployeeStack.axis = .vertical
        waitingOnEmployeeStack.distribution = .fillEqually
        waitingOnEmployeeStack.spacing = 4
        
        contentView.addSubview(waitingOnEmployeeStack)
        waitingOnEmployeeStack.centerX(inView: contentView)
        waitingOnEmployeeStack.anchor(top: contentView.topAnchor, paddingTop: 5)

}

问题排查与解决方案 #

核心问题 #

1. 初始层级错误：ContentView被添加到jobInfoCardView而非ScrollView内部，导致无法在ScrollView中展示。
2. 高度约束缺失：更新后的代码中，ContentView没有明确的高度约束，内部的UIStackView也未绑定ContentView的底部，Auto Layout无法计算ContentView的高度，最终因高度为0而不可见。

修复步骤 #

1. 确保ContentView是ScrollView的直接子视图：确认scrollView.addSubview(contentView)调用正确，避免层级错误。
2. 完善ContentView约束：
   • 绑定ContentView宽度到ScrollView的frameLayoutGuide，确保内容适配ScrollView可视宽度：

     contentView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true
     

   • 给内部UIStackView添加底部约束，让Auto Layout自动计算ContentView的高度：

     waitingOnEmployeeStack.anchor(bottom: contentView.bottomAnchor, paddingBottom: 5)
     

3. 检查ScrollView自身约束：确保ScrollView在jobInfoCardView内的四边约束完整，无遗漏导致布局异常。

修复后的configureUI示例 #

fileprivate func configureUI() {
    // 布局jobInfoCardView
    view.addSubview(jobInfoCardView)
    jobInfoCardView.anchor(top: circularProgressView.bottomAnchor, left: view.leftAnchor, right: view.rightAnchor,
                           paddingTop: 52, paddingLeft: 24, paddingRight: 24)
    
    // 布局ScrollView
    jobInfoCardView.addSubview(scrollView)
    scrollView.anchor(top: jobInfoCardView.topAnchor, left: jobInfoCardView.leftAnchor,
                      bottom: jobInfoCardView.bottomAnchor, right: jobInfoCardView.rightAnchor,
                      paddingTop: 4, paddingLeft: 4, paddingBottom: 4, paddingRight: 4)
    
    // 布局ContentView
    scrollView.addSubview(contentView)
    contentView.anchor(top: scrollView.contentLayoutGuide.topAnchor, left: scrollView.contentLayoutGuide.leftAnchor,
                       bottom: scrollView.contentLayoutGuide.bottomAnchor, right: scrollView.contentLayoutGuide.rightAnchor)
    contentView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true
    
    // 配置并布局StackView
    waitingOnEmployeeStack.axis = .vertical
    waitingOnEmployeeStack.distribution = .fillEqually
    waitingOnEmployeeStack.spacing = 4
    
    contentView.addSubview(waitingOnEmployeeStack)
    waitingOnEmployeeStack.centerX(inView: contentView)
    waitingOnEmployeeStack.anchor(top: contentView.topAnchor, bottom: contentView.bottomAnchor,
                                  paddingTop: 5, paddingBottom: 5)
}

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