假设我在UIStackView中添加了更多可以显示的视图,我如何让UIStackView滚动?


当前回答

对于嵌套视图或单栈视图,滚动视图必须与根视图设置固定宽度。滚动视图内部的主堆栈视图必须设置相同的宽度。[我的滚动视图是一个视图的波纹,忽略它]

在UIStackView和 UIScrollView。

其他回答

为macOS Catalyst添加了一些新的视角。由于macOS应用程序支持窗口大小调整,你的UIStackView可能会从一个不可滚动的状态转换为一个可滚动的状态,反之亦然。这里有两件微妙的事情:

UIStackView被设计成适合它所能适应的所有区域。 在过渡期间,UIScrollView将尝试调整其边界大小,以考虑导航栏(或macOS应用程序中的工具栏)下新获得/丢失的区域。

不幸的是,这会造成一个无限循环。我不是非常熟悉UIScrollView和它的adjustdcontentinset,但从我的日志在其layoutSubviews方法,我看到以下行为:

一个人把窗户放大了。 UIScrollView试图缩小它的边界(因为不需要工具栏下面的区域)。 UIStackView。 不知何故UIScrollView不满意,决定恢复到更大的边界。这对我来说感觉很奇怪,因为我从日志中看到的是UIScrollView.bounds.height == UIStackView.bounds.height。 UIStackView。 然后循环到步骤2。

在我看来,有两个步骤可以解决这个问题:

UIStackView一致。top到UIScrollView.topMargin。 设置contentInsetAdjustmentBehavior为。never。

这里我关注的是一个垂直增长的UIStackView的垂直可滚动视图。对于水平对,相应更改代码。

希望它能在未来帮助到任何人。在网上找不到任何人提到这一点,我花了很长时间才弄清楚发生了什么。

你可以试试ScrollableStackView: https://github.com/gurhub/ScrollableStackView

它是Objective-C和Swift兼容的库。它可以通过CocoaPods获得。

样本代码(Swift)

import ScrollableStackView

var scrollable = ScrollableStackView(frame: view.frame)
view.addSubview(scrollable)

// add your views with 
let rectangle = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 55))
rectangle.backgroundColor = UIColor.blue
scrollable.stackView.addArrangedSubview(rectangle)
// ...

样例代码(Objective-C)

@import ScrollableStackView

ScrollableStackView *scrollable = [[ScrollableStackView alloc] initWithFrame:self.view.frame];
scrollable.stackView.distribution = UIStackViewDistributionFillProportionally;
scrollable.stackView.alignment = UIStackViewAlignmentCenter;
scrollable.stackView.axis = UILayoutConstraintAxisVertical;
[self.view addSubview:scrollable];

UIView *rectangle = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 55)];
[rectangle setBackgroundColor:[UIColor blueColor]];

// add your views with
[scrollable.stackView addArrangedSubview:rectangle]; 
// ...

如果你有一个约束,使堆栈视图垂直居中在滚动视图内,只需删除它。

例如,垂直堆栈视图/滚动视图(使用EasyPeasy自动布局):

let scrollView = UIScrollView()
self.view.addSubview(scrollView)
scrollView <- [
    Edges(),
    Width().like(self.view)
]

let stackView = UIStackView(arrangedSubviews: yourSubviews)
stackView.axis = .vertical
stackView.distribution = .fill    
stackView.spacing = 10
scrollView.addSubview(stackView)
stackView <- [
    Edges(),
    Width().like(self.view)
]

只要确保每个子视图的高度都已定义!

在我的例子中,stackView内的视图数量是可变的,我想将项目居中。例如,在stackView中有一个视图,我希望这个视图位于屏幕中央,如果所有的视图都不适合屏幕,我希望视图是可滚动的。

这是我的视图的层次结构。

所以我为按钮设置了一个固定的宽度,然后,为stackView:

与按钮相同的固定宽度,但优先级为650。 对齐X中心到containerView 尾随>= 0和前导>= 0到containerView 底部和顶部空间到containerView

对于containerView:

拖尾,领先,底部,顶部,等高,等宽(250优先级)到superview 固定的高度

对于scrollView:

尾随,领先,底部,顶部到父视图

scrollView也嵌入到具有前导和后导约束的视图中。

关于我用来解决这个问题的代码:

for index in 0...array.count - 1 {

      if index == 0 {
          firstButton.setTitle(title, for: .normal)
      } else {
          let button = UIButton()
          button.setTitle(title, for: .normal)
          stackView.addArrangedSubview(button)
          stackView.setNeedsLayout()
      }
}
containerView.layoutIfNeeded()
        
stackView.distribution = .fillEqually
stackView.spacing = 10
stackView.alignment = .fill