如何使带有选项卡视图的视图可滚动？

Posted 2023-02-24

【中文标题】如何使带有选项卡视图的视图可滚动？

【英文标题】：How Can I Make a View, With a Tab View in It, Scrollable?

【发布时间】：2020-04-01 13:40:14

【问题描述】：

我在 NSView 中有一个 NSTabView。该 NSView 在 NSClipView 中，而 NSClipView 又在 NSScrollView 中。它看起来像这样（绿色为 NSTabView，红色为 NSView）：

如您所见，NSTabView 的内容被剪裁了，并且没有出现滚动条（因为视图没有扩展到窗口之外）。

如何使 NSTabView 占用所需的空间（不会剪掉），并用它扩展 NSView？然后，NSScrollView 就可以处理过度生长的 NSView 的滚动了。

由于我的内容是动态变化的，我不想为 NSTabView 的父视图的宽度和高度设置一些硬值。

这只是其中的一部分；现在是整个层次结构的样子：

我希望 NSTabView 的超级视图可以滚动而不是被剪掉，像这样：

【问题讨论】：

你是如何设置滚动视图的？ This 应该提供一些线索。

我设置了约束，以便 NSTabView 在其父视图内展开。它的超级视图在滚动视图的剪辑视图中。但是，这会导致 NSTabView 扩展与其父视图中的空间一样多，从而剪裁其内容。我不希望内容被剪掉；相反，我希望 NSTabView 在不剪切其内容的情况下占用所需的空间。我怎样才能做到这一点？我已经阅读了文档，仍然一无所知！

【参考方案1】：

我将描述的设置是用于将NSTabView 固定到滚动视图的顶部、左侧和右侧的设置。请注意NSTabView 可以替换为任何其他NSView，设置相同。

从将滚动视图放入 xib/storyboard 开始，您将拥有 NSScrollView -> NSClipView -> NSView (document view)。将 NSScrollView 约束到窗口的边缘。将您的 NSTabView 放到 NSView 实例上。添加约束以使您的 NSTabView 边缘约束等于 NSView 并使用定义它的选项卡视图内的其他内容显式或隐式定义高度约束。

我个人喜欢将NSView 实例（文档视图）布局更改为使用约束，默认情况下它使用自动调整大小的掩码，这使其难以与 NSTabView 保持同步。我们希望将文档视图固定在滚动视图的顶部、左侧和右侧。此视图的大小决定了可滚动区域，因此我们希望它与 NSTabView 的大小相同，因此选项卡视图的高度将决定可滚动区域。

要更改此设置，请选择文档视图，然后在 Size Inspector 下将“布局”类型更改为“自动”。

最后，在顶部、左侧和右侧添加约束，您应该可以开始了。

如果您希望滚动视图从顶部而不是底部开始，您应该子类化文档视图并覆盖isFlipped：

class FlippedView: NSView 
    override var isFlipped: Bool  true 

【讨论】：

使用约束将该文档视图固定到剪辑视图的顶部、左侧和右侧，为我完成了这项工作！我什至没有想过将文档视图的布局设置为“自动”！非常感谢，非常感谢您的帮助。