使用带有对齐（填充）和分布（按比例填充）的嵌套垂直 StackView 渲染 ScrollView 内容的问题

Question

我试图在 ScrollView 中嵌套一个 stackView 以避免为单个视图（3 个标签和一个 ImageView）设置约束。 如果没有 StackView，事情就像在 ScrollView 中为每个视图设置约束的单个视图一样工作。

在 ScrollView 中使用 Vertical Stack 可以吗？ 为什么 Distribution = 'Fill Proportionally' 未按预期呈现？

屏幕截图显示了我对 ScrollView 和 StackView 的约束设置以及带有模拟器输出的 Attributes Inspector 设置。

Screenshot of constraint settings in IB

Answer 1

您的评论：“我希望 ImageView 在启用滚动（垂直和水平）的情况下理想地匹配图像的原始比例。” 真的没有意义。

我猜你从https://apod.nasa.gov/apod/ap200116.html 中提取了数据（在你的屏幕截图中）......该页面上的图像是4096 x 4088 像素。如果你想在启用垂直和水平滚动的情况下显示，整个屏幕将只被图像的一小部分覆盖，用户需要滚动、滚动、滚动、滚动才能看到描述。

您可能想要的更有可能是为您的图像视图选择一个纵横比——16:10 是一个常见的、合理的比例——并将 imageView 设置为Aspect Fit。它看起来像这样：

所以，下面是您希望在 Storyboard 中布局视图控制器的方式：

当你有更长的文字时，描述标签会继续垂直扩展，并且有足够的文字你会得到垂直滚动。

您可能还想在视图中嵌入标签，因此您可以添加一些前导和尾随“填充”空间以获得更好的外观。

您的图像视图的另一个选项是给它一个连接到@IBOutlet 的高度约束。下载图像后，更改该约束的 .constant 以匹配新图像的纵横比。不过，这需要通过代码完成 - 您不能直接在 Storyboard 中执行此操作（除非您将始终获得完全相同大小/纵横比的图像）。

---

编辑

这是一种动态调整图像视图大小以匹配下载图像纵横比的方法...

使用相同的 Storyboard 约束设置，将 aspect = 16:10 约束上的 Priority 更改为 High (750)。

当视图加载时，图像视图将自己匹配到16:10 纵横比。

假设您正在使用异步图像下载过程，当图像完成下载时：

// set the image
imageView.image = img
    
// get the aspect ratio
let m = img.size.height / img.size.width
    
// add new aspect ratio constraint to the image view
//  because this constraint will have (by default) a Priority of Required (1000),
//  it will "override" the Storyboard 16:10 constraint that has Priority: 750
self.imageView.heightAnchor.constraint(equalTo: self.imageView.widthAnchor, multiplier: m).isActive = true

// animate the size change
UIView.animate(withDuration: 0.3, animations: { [weak self] in
    guard let self = self else { return }
    self.view.layoutIfNeeded()
})

我在这里放了一个工作示例，您可以尝试一下并检查布局和代码：https://github.com/DonMag/UshaSample