UIView内双垂直UIStackView布局异常及UITableView滚动修复求助

一、当前布局方案的不合理之处 #

• 两个UIStackView（upperMainView和lowerMainView）都调用了constraintsForFillingSuperview()，导致两者完全重叠在父视图上，下方表格被上方视图遮挡，自然无法滚动和显示。
• 通过directionalLayoutMargins的bottom值控制表格高度是错误用法，布局边距并非用来约束视图尺寸的，这会导致不同屏幕尺寸下布局完全失控，仅放大时偶然显示是巧合。
• 未将两个垂直StackView整合到同一父容器，无法实现上下排列的预期布局结构。

二、修复步骤（让下方表格可滚动并正常显示） #

1. 调整整体布局结构 #

创建根垂直StackView，将两个分组StackView作为子视图加入，实现上下有序排列：

public override func viewDidLoad() {
    super.viewDidLoad()
    
    // 根StackView，承载两个分组视图
    let rootStackView = UIStackView()
    rootStackView.axis = .vertical
    rootStackView.spacing = 16 // 两个分组间的间距
    rootStackView.isLayoutMarginsRelativeArrangement = true
    rootStackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
    rootStackView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(rootStackView)
    
    // 约束根StackView铺满父视图安全区域
    NSLayoutConstraint.activate([
        rootStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        rootStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        rootStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        rootStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
    ])
    
    // --- 上方分组（小表格）---
    let upperMainView = UIStackView()
    upperMainView.axis = .vertical
    upperMainView.spacing = 8
    
    let upperSectionLabel = UILabel()
    upperSectionLabel.text = "小表格分组"
    upperMainView.addArrangedSubview(upperSectionLabel)
    
    let upperTableView = UITableView()
    upperTableView.register(UITableViewCell.self, forCellReuseIdentifier: "UpperCell")
    // 给小表格设置固定高度约束
    upperTableView.heightAnchor.constraint(equalToConstant: 200).isActive = true
    upperTableView.translatesAutoresizingMaskIntoConstraints = false
    upperMainView.addArrangedSubview(upperTableView)
    
    // --- 下方分组（大表格）---
    let lowerMainView = UIStackView()
    lowerMainView.axis = .vertical
    lowerMainView.spacing = 8
    
    let lowerSectionLabel = UILabel()
    lowerSectionLabel.text = "大表格分组"
    lowerMainView.addArrangedSubview(lowerSectionLabel)
    
    let lowerTableView = UITableView()
    lowerTableView.register(UITableViewCell.self, forCellReuseIdentifier: "LowerCell")
    lowerTableView.translatesAutoresizingMaskIntoConstraints = false
    lowerMainView.addArrangedSubview(lowerTableView)
    
    // 将两个分组加入根StackView
    rootStackView.addArrangedSubview(upperMainView)
    rootStackView.addArrangedSubview(lowerMainView)
    
    // 设置表格数据源与代理
    upperTableView.dataSource = self
    lowerTableView.dataSource = self
}

// 实现UITableViewDataSource协议示例
extension YourViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tableView == upperTableView ? 5 : 20 // 小表格5行，大表格20行
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: tableView == upperTableView ? "UpperCell" : "LowerCell", for: indexPath)
        cell.textLabel?.text = "第\(indexPath.row + 1)行"
        return cell
    }
}

2. 关键修复点说明 #

• 根容器整合：用根StackView统一管理两个分组，避免视图重叠，实现上下有序排列。
• 表格高度约束：给小表格设置固定高度，大表格不设固定高度，让根StackView自动分配剩余空间，确保大表格可正常滚动。
• 正确设置约束：使用Auto Layout锚点约束替代自定义的constraintsForFillingSuperview()，避免布局冲突。
• 数据源与代理：必须给UITableView设置dataSource（如需交互还需设置delegate），否则表格无法加载数据、响应滚动。

3. 额外注意事项 #

• 确保UITableView的translatesAutoresizingMaskIntoConstraints设为false，让Auto Layout生效。
• 注册表格单元格复用标识符，避免运行时崩溃。
• 可根据需求调整根StackView的spacing和分组内的spacing，优化布局间距。

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