XIB中如何对齐含4、5个元素的Stack View实现数字键盘等宽布局

核心实现逻辑基于嵌套Stack View+跨视图等宽约束，不需要写任何固定宽度值，完全满足对齐要求。

基础布局搭建 #

• 最外层容器：拖入垂直方向UIStackView作为小键盘的根容器，设置属性：
  • Axis：Vertical
  • Alignment：Fill
  • Distribution：Fill Equally
  • Spacing：设置为你需要的统一按钮间距
  • 给根Stack View添加上下左右四边约束，贴住小键盘视图的边缘即可。
• 前3行（每行5个按钮的行）：
  • 每行单独拖入一个水平方向UIStackView，属性统一设置：
    • Axis：Horizontal
    • Alignment：Fill
    • Distribution：Fill
    • Spacing：和根Stack View的Spacing值完全一致
  • 每行的5个按钮依次拖入对应水平Stack View，给同列的灰色数字按钮添加跨行列的等宽约束，保证所有灰色按钮宽度完全统一。
  • 给同一行内的「+」「x」两个黄色运算符按钮添加互相等宽约束，保证两个黄色按钮宽度一致。
• 最后1行（4个按钮的行）：
  • 同样先拖入一个和上面行属性完全一致的水平UIStackView，放入行容器。
  • 前3个灰色按钮依次拖入该行Stack View，分别和上方行对应位置的灰色按钮添加等宽约束，保证上下灰色按钮完全对齐。
  • 拖入黄色「=」按钮放入该行Stack View末尾，不要加固定宽度约束：给「=」按钮添加和「+」按钮的等宽约束，双击该约束修改参数：
    • Multiplier设为2
    • Constant设为你之前统一设置的按钮Spacing值
      这个约束会让「=」按钮宽度刚好等于「+」「x」两个按钮加中间间距的总宽度，和上方两个黄色按钮的占位完全对齐。

避坑提示 #

• 所有水平Stack View的Distribution不要选Fill Equally，否则会强制把行内所有元素拉成统一宽度，无法实现「=」按钮占2倍宽度的效果。
• 所有按钮不要添加固定宽度、固定高度约束，宽高关系全部由Stack View和等宽约束控制，会自动跟随小键盘整体尺寸按比例适配不同屏幕。
• 如果你的按钮有圆角、配色差异，直接在按钮本身属性设置即可，不会影响布局约束。

该方案完全适配Auto Layout布局规则，运行时不会出现约束冲突，对齐精度完全达到系统原生键盘的效果。

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