Swift中如何让垂直UIStackView等高子视图从顶部开始排列？

核心问题分析 #

你当前设置的distribution = .equalSpacing会让StackView在子视图之间、顶部和底部均分空白空间，这就是子视图无法贴顶的原因。同时需要限制子视图数量不超过5个。

具体修复步骤 #

1. 修改StackView的分布属性 #

将分布模式从.equalSpacing改为.fill，子视图会按自身尺寸从顶部开始排列，多余空间自动留在底部：

var homeVStack: UIStackView = {
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.alignment = .top
    stackView.distribution = .fill // 替换原有的.equalSpacing
    stackView.spacing = 20
    stackView.translatesAutoresizingMaskIntoConstraints = false
    return stackView
}()

2. 限制子视图数量最多5个 #

加载数据时只取数组前5个元素，避免超出数量限制：

private func loadData() {
    if let homeFormList = data?.homeTeamForm {
        // 截取前5个元素
        let limitedForms = Array(homeFormList.prefix(5))
        for homeForm in limitedForms {
            let teamFormView = SimpleScoreView()
            teamFormView.teamForm = homeForm
            teamFormView.heightAnchor.constraint(equalToConstant: 50).isActive = true
            teamFormView.backgroundColor = .yellow
            homeVStack.addArrangedSubview(teamFormView)
        }
    }
}

可选优化：固定StackView高度（按需使用） #

如果希望StackView高度刚好适配子视图总尺寸，避免多余空白，可以在添加完子视图后设置高度约束：

private func loadData() {
    if let homeFormList = data?.homeTeamForm {
        let limitedForms = Array(homeFormList.prefix(5))
        for homeForm in limitedForms {
            // 原有创建子视图代码不变
            let teamFormView = SimpleScoreView()
            teamFormView.teamForm = homeForm
            teamFormView.heightAnchor.constraint(equalToConstant: 50).isActive = true
            teamFormView.backgroundColor = .yellow
            homeVStack.addArrangedSubview(teamFormView)
        }
        // 计算总高度：子视图高度总和 + 间距总和
        let totalHeight = CGFloat(limitedForms.count) * 50 + CGFloat(max(0, limitedForms.count - 1)) * 20
        homeVStack.heightAnchor.constraint(equalToConstant: totalHeight).isActive = true
    }
}

内容的提问来源于stack exchange，提问作者Zin Win Htet