在iOS中如何创建数值对齐正确的简易网格布局？

修复方案 #

对齐问题根因 #

你遇到的对齐偏差基本来自这几个配置错误：

• 表头cell与数据行cell的StackView左右边距不统一
• StackView的distribution属性选型错误，没有固定每列宽度
• 列内文本的对齐方式未设为居中，导致同列内容偏移

具体修改步骤 #

1. 统一StackView全局配置
   表头和所有数据行的水平StackView必须完全遵循以下配置：

   • distribution设为fillEqually，强制三列宽度始终相等
   • alignment设为center，保证列内元素居中对齐
   • spacing设为0，不需要额外列间距，宽度分配完全由fillEqually控制
   • StackView距离cell父视图的leading、trailing约束值完全一致，比如统一设为16pt，禁止出现两边边距不对称或者表头、数据行边距不同的情况

2. 列标签通用配置
   所有表头标题、行数据标签都按以下规则设置，避免大数值显示异常：

   • textAlignment设为.center，保证文字本身在列内居中
   • 开启adjustsFontSizeToFitWidth = true，内容超出列宽时自动缩小字号适配
   • 设置minimumScaleFactor = 0.5，限制最小字号为原大小的50%，超出后自动显示省略号
     如果你不需要三列等宽，可以给每列设置固定宽度比例约束（比如Name列占40%、balance占35%、currency占25%），替换fillEqually配置，也能保证上下对齐。

3. 可选优化方案
   建议将表头从第一个cell迁移到UITableView的sectionHeader中，和业务数据行完全分离，后续添加分组、下拉刷新等功能时不会互相干扰，维护成本更低。

配置示例代码 #

// StackView统一配置方法，表头、数据行cell通用
func configCommonStackView(stackView: UIStackView, superView: UIView) {
    stackView.axis = .horizontal
    stackView.distribution = .fillEqually
    stackView.alignment = .center
    stackView.spacing = 0
    stackView.translatesAutoresizingMaskIntoConstraints = false
    superView.addSubview(stackView)
    
    NSLayoutConstraint.activate([
        stackView.leadingAnchor.constraint(equalTo: superView.leadingAnchor, constant: 16),
        stackView.trailingAnchor.constraint(equalTo: superView.trailingAnchor, constant: -16),
        stackView.topAnchor.constraint(equalTo: superView.topAnchor),
        stackView.bottomAnchor.constraint(equalTo: superView.bottomAnchor)
    ])
}

// 列标签统一配置方法
func configColumnLabel(label: UILabel) {
    label.textAlignment = .center
    label.adjustsFontSizeToFitWidth = true
    label.minimumScaleFactor = 0.5
    label.numberOfLines = 1
}

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