如何在堆栈视图中拥有不同大小的图像（Swift）

在 iOS 应用程序中，我们通常需要在界面中展示图片。在某些情况下，图片需要有不同的尺寸。这篇文章将会教你如何使用堆栈视图控件 UIStackView 在界面中展示不同大小的图片。

步骤 1: 添加堆栈视图控件

首先，我们需要在界面中添加一个堆栈视图控件。可以通过拖拽控件方式将它添加到 Xcode 的故事板中，也可以在代码中创建一个新的堆栈视图。

以下是代码中创建堆栈视图的示例：

let stackView = UIStackView()
stackView.axis = .vertical
stackView.alignment = .center
stackView.distribution = .fill

以上代码创建了一个垂直方向的堆栈视图，每个子视图都将在堆栈视图的中心对齐，并且会填充整个视图空间。

步骤 2: 添加图片视图到堆栈视图中

接下来，我们需要将不同尺寸的图片添加到堆栈视图的子视图中。可以使用 UIImageView 来展示图像。

以下是将图片视图添加到堆栈视图中的示例代码：

let smallImage = UIImage(named: "small_image")
let smallImageView = UIImageView(image: smallImage)

let mediumImage = UIImage(named: "medium_image")
let mediumImageView = UIImageView(image: mediumImage)

let largeImage = UIImage(named: "large_image")
let largeImageView = UIImageView(image: largeImage)

stackView.addArrangedSubview(smallImageView)
stackView.addArrangedSubview(mediumImageView)
stackView.addArrangedSubview(largeImageView)

以上代码添加了三个图片视图到堆栈视图的子视图中。这里我们假设有三张图片，它们的名字分别为 small_image、medium_image 和 large_image。

步骤 3: 设置堆栈视图中图像的大小

由于我们的图片有不同的尺寸，所以我们需要对它们进行调整。在 UIStackView 中，我们可以使用 contentMode 属性来控制视图的大小。

以下是设置图片视图大小的示例代码：

smallImageView.contentMode = .scaleAspectFit
mediumImageView.contentMode = .scaleAspectFit
largeImageView.contentMode = .scaleAspectFit

smallImageView.heightAnchor.constraint(equalToConstant: 50).isActive = true
mediumImageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
largeImageView.heightAnchor.constraint(equalToConstant: 150).isActive = true

以上代码将所有的图片视图的 contentMode 属性设置为 scaleAspectFit，这意味着图片将在视图中等比缩放以适应视图大小。

另外，我们使用 heightAnchor 属性来设置图片视图的高度。这里我们假设小图的高度为 50，中等图的高度为 100，大图的高度为 150。

步骤 4: 运行程序

现在，我们已经完成了堆栈视图中不同大小的图片的设置。运行程序，你应该能够看到三张图片，它们的大小不同。

结论

在本文中，我们学习了如何使用堆栈视图控件来展示不同大小的图片。使用 contentMode 属性以及 heightAnchor 属性，我们可以轻松控制图片的大小和位置。