UIStackView 和多行标签？

Posted 2023-03-11

【中文标题】UIStackView 和多行标签？

【英文标题】：UIStackView and Multiline Labels?

【发布时间】：2017-11-01 22:49:28

【问题描述】：

我试图让它工作，但界面构建器正在努力工作，我想知道是否有人对此有适当的解决方案。

所以我想要一个包含多行标签的stackview。 google 上的第一次点击 (read here) 告诉您将标签嵌入到视图 (A) 中，然后将该视图拖到另一个视图 (B) 中（因为嵌入的视图 (A) 有一个 20 像素的填充），然后取消嵌入第一视图（A）....瞧。除了这只会欺骗水平堆栈的堆栈视图，如果您继续堆栈视图，您仍然会遇到很多问题（我将在问题后面用屏幕截图演示）。

我在 google 上发现 another guide 批评了该问题的潜在解决方案，即修复了堆栈视图的宽度。作者指出苹果不打算让你这样做，毕竟它应该是自动布局，而不是固定布局。本指南认为该问题只是一个错误，您可以创建一个带有单行标签的堆栈视图，将其全部设置好，然后添加多行。我试过了，但没有用，它只是把整个堆栈视图弄乱了！除非标签的行数设置为 1 且只有 1，否则堆栈视图将扭曲并基本上中断。(Image 1) Stackview with label set to have multiple lines.

所以我之前谈到了在视图中嵌入段落标签。 This doesn't cause any errors in the storyboard,(Image 2) 你不能真正将文本与其他 UIStacks 正确对齐，但这不是我要立即解决的问题。问题是运行时发生的事情...... Simulator, Portrait (Image 3)，Simulator, Landscape (Image 4)。

我尝试在实际设备上运行它以查看它是否只是一个模拟器错误，但同样的事情发生在我的 iphone 6 上。可以肯定地说这可能行不通！

哦，就在我们继续之前，我正在按以下方式构建堆栈视图：

[name - placeholder]
[phone - placeholder]
[address - placeholder]
, setting a spacing of 8 and equal fill
,vertically stacking all of these stacks (3 into 1) and setting a spacing of 8
, vertically stacking the details titles with the big stack and 8 spacing
,finally adding the title and button into the stack view with a spacing of 32.

然后我应用一些情节提要约束：在这种情况下只是垂直和水平居中，因此视图始终居中并在两个屏幕方向上都正确显示。

即使没有正确对齐，这是应用堆栈和约束之前的视图，这就是我希望我的残局看起来的样子：Looks kind of silly, but I want to figure this out so I can actually stack my paragraphs! (Image - 5)。

所以现在希望我已经确定您不能真正将标签嵌入到视图中，因为它在运行时无法正确呈现，并且您不能欺骗堆栈添加新行。

如何安全地将多行标签放入堆栈视图？

这几乎是一个分支问题，但是当您尝试将堆栈应用于分段标签时，它会将标签的宽度设置为绝对巨大（有时它会引发界面构建器无法呈现它的错误Demonstrated here (Image 6)。我已经看到这种情况发生了几次，并不太明白 xcode 如何认为这是一个明智的选择。

我不想对我的标签或堆栈应用固定宽度，因为我只会收到另一个警告，而且警告很糟糕！

我不知道该怎么做，如果有人知道可以实现的方法，我将永远感激不尽！

谢谢

【问题讨论】：

看看你的图片 5，为什么这是堆栈视图的情况？您所展示的内容很容易在没有堆栈视图的情况下实现，那么为什么还要费心使用堆栈视图呢？

@matt 主要是因为这个视图完全没有应用自动布局。这个问题和我提供的示例的目的是作为我想要实现的概念的演示。

@matt 我理论上可以将所有内容自动布局到屏幕的边界，只需使用布局约束。但我真的很喜欢将东西粘贴到堆栈视图中，因为它似乎在不同的设备上工作得更好，并且需要更少地摆弄约束。另外，我认为苹果确实希望您将尽可能多的内容放入堆栈视图中（如果我错了，请纠正我）

这是一个错误。我已将其作为雷达报告给 Apple，并作为重复票关闭。同样的事情有很多雷达。添加您自己的，因为这将有助于解决此问题。但是，是的，堆栈视图通常在 Interface Builder 中被破坏。一种方法是它不能显示多行标签。它在运行时工作正常。但是在界面生成器中它被破坏了。

顺便说一句。我更喜欢在代码中创建堆栈视图。练习也很好，因为您可以创建一些非常好的布局，并且必须将它们概念化，但还要保持代码易于阅读和维护等......

【参考方案1】：

这似乎确实是一个错误。

对我有用的解决方法是将多行标签嵌入到视图中并将其保留在那里。

这修复了 Storyboard 编辑器上的布局，并且也适用于模拟器。

奇怪的是，如果我在同一个 StackView 上有多个多行标签，我只需将其中一个嵌入到 UIView 中，然后所有其他多行标签都会正常运行。

【参考方案2】：

虽然我同意这是 UIStackView 中的一个问题，因为布局应该根据 UILabel 的固有大小进行。 当使用带有多行标签的 stackview 时，它无法根据标签更新其大小。 要解决此问题，请使用标签的 preferredMaxLayoutWidth 属性并将其设置为任意值。

label.preferredMaxLayoutWidth = 1

注意：当我将它设置为 1 时，这甚至对我有用

Apple Docs 中定义的 preferredMaxLayoutWidth 属性：

当应用布局约束时，此属性会影响标签的大小。在布局期间，如果文本超出此属性指定的宽度，则附加文本会流动到一个或多个新行，从而增加标签的高度。

我们确实希望为垂直 UIStackView 增加。

【参考方案3】：

解决方案是将 UILabel 嵌入“没有插入的视图”中。 然后更新你的约束。