我如何制作一个带有标签视图的视图,可滚动?

纳希扬

我在 NSView 中有一个 NSTabView。该 NSView 在一个 NSClipView 中,而后者又在一个 NSScrollView 中。它看起来像这样(绿色为 NSTabView,红色为 NSView):

在此处输入图片说明

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

我怎样才能让 NSTabView 占用尽可能多的空间(不剪掉),并用它扩展 NSView?然后,NSScrollView 可以处理过度生长的 NSView 的滚动。

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

这只是其中的一部分;这是现在的整体层次结构:

在此处输入图片说明

I want the NSTabView's superview to be scrollable instead of clipping out, like this:

在此处输入图片说明

Lucas Derraugh

The setup I'll describe is for an NSTabView that will pin to the top, left, and right sides of the scroll view. Note the NSTabView could be replaced with any other NSView, the setup is the same.

在此处输入图片说明

Starting with you putting a scroll view into the xib/storyboard, you'll have NSScrollView -> NSClipView -> NSView (document view). Constrain the NSScrollView to the edges of the window. Drop your NSTabView onto the NSView instance. Add constraints so that your NSTabView edge constraints equal the NSView and define a height constraint either explicitly or implicitly with other content inside the tab view that defines it.

在此处输入图片说明

Personally I like to change the NSView instance (document view) layout to use constraints, by default it uses autoresizing masks and this makes it difficult to keep it in sync with the NSTabView. We want the document view to be pinned to the top, left, and right sides of the scroll view. The size of this view is what determines the scrollable region so we want it to be the same size as the NSTabView so the height of the tab view will determine the scrollable area.

To change this, select the document view, and under the Size Inspector we want to change the "Layout" type to "Automatic".

在此处输入图片说明

Lastly, add constraints to the top, left, and right and you should be good to go.

If you want the scroll view to start at the top rather than the bottom, you should subclass the document view and override isFlipped:

class FlippedView: NSView {
    override var isFlipped: Bool { true }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使视图可滚动 - 视图包含带有标签和图像的堆栈?

带有两个ListViews的可滚动视图

在另一个可滚动视图后面传递的可滚动视图

带有Layoutweight标签的滚动视图

带有列表视图的可滚动页面

如何制作一个具有屏幕尺寸两个div的可滚动flexbox?

如何创建一个带有可选辅助视图参数的SwiftUI视图?

如何制作一个重复的“ numpy”数组视图

如何制作一个列表视图并添加它?

滚动视图只有一个直接子错误

如何制作带有圆角的视图?

我想创建一个带有文本视图的计数器

我有两个水平滚动视图。如何一次显示一个,并在单击按钮时在它们之间切换?

如何在一个视图中使用带有 2 个参数的 AVG()

Laravel 包含一个带有 JavaScript 的视图

仅当RecyclerView可滚动时,才如何在RecyclerView的最后一个视图中添加填充?

我有一个折叠工具栏和嵌套滚动视图,我无法让它工作

Flutter:使两个列表视图可滚动为一个

如何让一个带有可滚动 div 的 div 不滚动超过基于窗口大小的某个点?

如何制作水平滚动视图?

如何在集合视图控制器上添加另一个滚动视图?

如何制作一个具有2个覆盖该屏幕且不重叠的视图的屏幕

为什么我的网站在移动端视图中有一个水平滚动条?

制作可滚动的响应网格视图

ViewPager 带有视图模型和实时数据,所有 6 个标签数据都被最后一个标签数据替换

如何制作一个带有负值的seekBar?

如何制作带有两个容器的标签。一个小一点,一个大一点

播放框架(java):视图包含带有地图的另一个视图

ViewHolder 带有一个接受视图回收器视图的构造函数