使用堆视图创建3个按钮三角摆放

效果如图：

分析

从效果图看，想要让3个Button呈三角摆放，需要两个堆视图完成。
首先外部一个大的“垂直堆”，垂直堆第一项放一个Button，第二项放一个“水平堆”
水平堆里再放两个Button即可完成。

步骤1：拖拽需要的控件

按照上面分析，拖拽两个堆以及3个Button到storyboard
拖拽后效果如下：

注意，这个层次一定不能出错。

步骤2：设置属性

• 选中“垂直堆”，打开其视图检查器
  • Axis属性：是垂直还是水平；
  • Spacing属性：子视图之间的距离，设置50，则这个堆里所有子视图对应方向都距离50
  • Alignment属性：子视图对齐方式
  • Distribution属性：子视图尺寸和位置。
• 设置“垂直堆”的Spacing为400，“水平堆”的Spacing为150

步骤3：拖拽堆调整位置和大小

通过选中左侧的Stack View，让其显示范围，此时再去拖拽，避免拖拽错控件。

最核心的两点

• 不要放错层次
• 不要拖拽错控件，堆的范围容易和子视图范围重合