如何实现两列UIStackView 使子视图均分水平空间适配多行文本

云上老周

2026-8-11

解决两列标签布局右侧空白问题的方案

你的问题核心在于内部垂直StackView的子视图（UILabel）没有占满所在列的宽度，导致即使外层水平StackView设置了.fillEqually，右侧列的标签依然只按自身内容宽度显示，出现视觉上的垂直空白间隙。可以通过以下几种方式修复：

方案一：修改垂直StackView的对齐方式

将左右两个垂直StackView的alignment从.top改为.fill，这样内部的UILabel会自动拉伸至StackView的宽度，文本会在列宽范围内自动换行：

private lazy var stackLeft: UIStackView = {
    let stackLeft = UIStackView()
    stackLeft.axis = .vertical
    stackLeft.alignment = .fill // 修改此处
    stackLeft.spacing = 8 // 可选：添加子视图间距，优化布局
    return stackLeft
}()

private lazy var stackRight: UIStackView = {
    let stackRight = UIStackView()
    stackRight.axis = .vertical
    stackRight.alignment = .fill // 修改此处
    stackRight.spacing = 8 // 可选：添加子视图间距，优化布局
    return stackRight
}()

方案二：给UILabel添加宽度约束

如果需要保持垂直StackView的.top对齐（比如部分标签需要左对齐且不占满宽度），可以在添加UILabel到StackView时，给每个标签添加与StackView等宽的约束：

// 示例：添加标签到左侧StackView
func addLabelToLeftStack(text: String) {
    let label = UILabel()
    label.text = text
    label.numberOfLines = 0 // 必须设置，支持多行显示
    label.translatesAutoresizingMaskIntoConstraints = false
    stackLeft.addArrangedSubview(label)
    
    // 添加宽度约束，让标签与StackView等宽
    NSLayoutConstraint.activate([
        label.leadingAnchor.constraint(equalTo: stackLeft.leadingAnchor),
        label.trailingAnchor.constraint(equalTo: stackLeft.trailingAnchor)
    ])
}