iOS 开发中的 UIStackView 使用详解

[iOS 开发中的 UIStackView 使用详解](#iOS 开发中的 UIStackView 使用详解)

前言

[一、UIStackView 是什么？](#一、UIStackView 是什么？)

二、常用属性

[1. axis](#1. axis)

[2. distribution](#2. distribution)

[3. alignment](#3. alignment)

[4. spacing](#4. spacing)

[5. isLayoutMarginsRelativeArrangement](#5. isLayoutMarginsRelativeArrangement)

[三、UIStackView 的初始化与用法](#三、UIStackView 的初始化与用法)

[1. 基本初始化](#1. 基本初始化)

[2. 添加到父视图并设置约束](#2. 添加到父视图并设置约束)

四、动态操作子视图

1.addArrangedSubview

2.removeArrangedSubview

3.insertArrangedSubview

[五、UIStackView 使用技巧](#五、UIStackView 使用技巧)

iOS 开发中的 UIStackView 使用详解

前言

在 iOS 开发中，界面布局往往是最耗时的一部分。UIStackView 是苹果自 iOS 9 推出的一个强大布局容器，它能极大简化界面的排版逻辑，让我们无需编写大量的 Auto Layout 约束，就能轻松实现响应式布局。本文将带你系统学习 UIStackView 的用法。

一、UIStackView 是什么？

UIStackView 是 UIView 的子类，它的主要作用是将一组子视图按照水平或垂直方向自动排列，并根据属性控制子视图的尺寸、间距和对齐方式。

不需要为子视图单独写复杂的 Auto Layout 约束；

适合构建线性布局（水平/垂直）；

与 Auto Layout 完美结合，能自动适应屏幕尺寸和内容变化。

二、常用属性

1. axis

决定排列方向：

复制代码

stackView.axis = .horizontal   // 水平排列
stackView.axis = .vertical     // 垂直排列

图1.UIStackView实现横向布局和纵向布局

2. distribution

决定子视图在主轴方向上的分布方式，可以结合alignment属性和spacing属性获得更灵活的布局效果。

1.fill

默认主轴方向的对齐方式。

2.fillEqually

等宽/高布局。

3.fillProportionally

按照子视图的固有尺寸比例分配空间。

4.equalSpacing

保持子视图中心点间距相等（视图尺寸不变，自动调整间隙）

5.equalCentering

我这里写了一个demo，用来展示它们之间的对齐方式。

图2.distribution的主轴对齐方式

3. alignment

alignment属性决定了UIStackView中排列的子视图在垂直于堆栈轴方向上的对齐方式。简单来说：

如果UIStackView是水平方向(.horizontal)，alignment控制的是子视图的垂直对齐。

如果UIStackView是垂直方向（.vertical），alignment控制的是子视图的水平对齐。

1.fill（默认，填充对齐）

默认值，子视图会尽可能填充 StackView 的交叉轴方向。

2.leading/.top

子视图在交叉轴的起始边对齐。

水平布局时 → 子视图靠上对齐。

垂直布局时 → 子视图靠左对齐。

3.trailing/.bottom

子视图在交叉轴的结束边对齐。

水平布局时 → 子视图靠下对齐。

垂直布局时 → 子视图靠右对齐。

4.center

子视图在交叉轴方向居中对齐

5.firstBaseline

基于文字的基线对齐。

6.lastBaseline

和 .firstBaseline 类似，但会基于最后一行文字的基线对齐。

这里我写了一个demo，用来演示alignmeng的各种属性。

图3.alignment的各种设置

4. spacing

设置UIStackView子视图之间的间距。

5. isLayoutMarginsRelativeArrangement

isLayoutMarginsRelativeArrangement是一个布尔值属性，用于控制 UIStackView如何计算其子视图的布局边界。

默认属性设置为false:子视图的布局相对于UIStackView的边界(bounds)。

当设置为true：子视图的布局相对于UIStackView的布局边距(layoutMargins)。

三、UIStackView 的初始化与用法

1. 基本初始化

复制代码

let label1 = UILabel()
label1.text = "苹果"
let label2 = UILabel()
label2.text = "香蕉"
let label3 = UILabel()
label3.text = "橙子"

let stackView = UIStackView(arrangedSubviews: [label1, label2, label3])
stackView.axis = .horizontal
stackView.spacing = 8
stackView.distribution = .fillEqually

2. 添加到父视图并设置约束

复制代码

view.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
    stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

四、动态操作子视图

UIStackView 并不直接管理子视图，而是通过 arrangedSubviews 属性管理。

1.addArrangedSubview

动态增加UIStackView子视图。

2.removeArrangedSubview

动态移除UIStackView子视图。

3.insertArrangedSubview

动态增加UIStackView子视图。

我们可以结合UIView的动态实现动态操作UIStackView子视图的各种操作。

图4.动态操作UIStackView子视图

五、本文demo

本文代码在这里。