5.2_设置distribution和alignment属性

UIStackView 的 Distribution 属性详解

UIStackView 的 distribution 属性决定了 arranged subviews 在 stack view 中的布局方式。它控制着子视图如何填充 stack view 的空间。理解 distribution 是掌握 UIStackView 布局的关键。让我们一起深入了解吧！🎉

distribution 属性有几个重要的选项，每个选项都会以不同的方式影响子视图的布局。这些选项包括：

Fill: 子视图会填充整个 stack view 的空间。
FillEqually: 所有子视图的大小相同，并填充整个 stack view 的空间。
FillProportionally: 子视图的大小与其内容的大小成比例。
EqualSpacing: 子视图之间的间距相等。
EqualCentering: 子视图的中心之间的间距相等。

Fill 模式

Fill 模式是 distribution 属性的默认值。在这种模式下，UIStackView 会尝试填充整个可用空间。如果子视图的内容小于 stack view 的大小，子视图会拉伸以填充剩余空间。如果子视图的内容大于 stack view 的大小，子视图会被压缩以适应 stack view。

例如，如果你有一个包含两个按钮的水平 UIStackView，并且 distribution 设置为 Fill，那么这两个按钮会尽可能地填充 stack view 的宽度。

FillEqually 模式

FillEqually 模式会强制所有 arranged subviews 具有相同的大小。这意味着每个子视图都会占据 stack view 中相等的空间。无论子视图的内容大小如何，它们都会被调整为相同的大小。

例如，如果你有一个包含三个标签的垂直 UIStackView，并且 distribution 设置为 FillEqually，那么这三个标签的高度将会相同，并且它们会平均分配 stack view 的高度。

FillProportionally 模式

FillProportionally 模式会根据 arranged subviews 的内容大小来分配空间。这意味着内容较大的子视图会获得更多的空间，而内容较小的子视图会获得较少的空间。这种模式适用于需要根据内容动态调整大小的情况。

例如，如果你有一个包含两个图像视图的水平 UIStackView，并且 distribution 设置为 FillProportionally，那么较大的图像会占据更多的宽度，而较小的图像会占据较少的宽度。

EqualSpacing 模式

EqualSpacing 模式会确保 arranged subviews 之间的间距相等。在这种模式下，UIStackView 会调整子视图的大小，以使它们之间的间距保持一致。子视图本身的大小可能会有所不同，但它们之间的间距始终相同。

例如，如果你有一个包含四个按钮的水平 UIStackView，并且 distribution 设置为 EqualSpacing，那么这四个按钮之间的间距将会相等。

EqualCentering 模式

EqualCentering 模式会确保 arranged subviews 的中心之间的间距相等。这意味着 UIStackView 会调整子视图的位置，以使它们的中心点之间的距离保持一致。这种模式适用于需要保持子视图中心对齐的情况。

例如，如果你有一个包含三个视图的水平 UIStackView，并且 distribution 设置为 EqualCentering，那么这三个视图的中心点之间的距离将会相等。

UIStackView 的 Alignment 属性详解

UIStackView 的 alignment 属性决定了 arranged subviews 在 stack view 的主轴上的对齐方式。它控制着子视图在 stack view 中的位置。

alignment 属性有几个选项，包括：

Fill: 子视图会填充整个 stack view 的空间。
Leading: 子视图与 stack view 的前边缘对齐。
Trailing: 子视图与 stack view 的后边缘对齐。
Center: 子视图在 stack view 中居中对齐。
Top: 子视图与 stack view 的顶部对齐。
Bottom: 子视图与 stack view 的底部对齐。
FirstBaseline: 子视图与 stack view 的第一个基线对齐。
LastBaseline: 子视图与 stack view 的最后一个基线对齐。

示例代码

swift

let stackView = UIStackView()
stackView.axis = .horizontal // 或者 .vertical
stackView.distribution = .fillEqually
stackView.alignment = .center
stackView.spacing = 10

// 添加 arranged subviews
let view1 = UIView()
view1.backgroundColor = .red
stackView.addArrangedSubview(view1)

let view2 = UIView()
view2.backgroundColor = .blue
stackView.addArrangedSubview(view2)

// 设置 stack view 的约束
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true
stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20).isActive = true
stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20).isActive = true
stackView.heightAnchor.constraint(equalToConstant: 50).isActive = true

通过调整 distribution 和 alignment 属性，你可以灵活地控制 UIStackView 中子视图的布局。希望这些解释能帮助你更好地理解和使用 UIStackView！🚀

5.2_设置distribution和alignment属性 ​

UIStackView 的 Distribution 属性详解 ​

Fill 模式 ​

FillEqually 模式 ​

FillProportionally 模式 ​

EqualSpacing 模式 ​

EqualCentering 模式 ​

UIStackView 的 Alignment 属性详解 ​

示例代码 ​