UIScrollView 中的嵌套 UIStackView 子项不会拉伸以填充

Posted 2023-02-27

【中文标题】UIScrollView 中的嵌套 UIStackView 子项不会拉伸以填充

【英文标题】：Nested UIStackView child in UIScrollView does not stretch to fill

【发布时间】：2019-11-10 16:15:14

【问题描述】：

我有一个UIStackView。

我添加了一些视图。

最后一个视图应位于屏幕底部。为了实现这一点，我添加了一个充当分隔符的视图，我在第一个和最后一个视图上设置了一个高度，想法是中间视图伸展以填充空间。

这行得通。

    let topView = UIView(frame: .zero)
        topView.withSize(.init(width: 0, height: 100))
        topView.backgroundColor = .lightGray

        let spacerView = UIView(frame: .zero)
        spacerView.backgroundColor = .darkGray

        let bottomView = UIView(frame: .zero)
        bottomView.withSize(.init(width: 0, height: 200))
        bottomView.backgroundColor = .lightGray

        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.spacing = 0
        stackView.distribution = .fill

        addSubview(stackView)

        stackView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
            stackView.topAnchor.constraint(equalTo: topAnchor),
            stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
        ])

        [topView, spacerView, bottomView].forEach  stackView.addArrangedSubview($0) 

我有一个场景，但是屏幕尺寸可能小于视图的尺寸。

我正在尝试将我的UIStackView 嵌入到UIScrollView 中，但是当我这样做时，间隔视图不再自行拉伸。就好像高度现在为零。 （我添加了间距来显示顶部和底部视图）

        let topView = UIView(frame: .zero)
        topView.withSize(.init(width: 0, height: 100))
        topView.backgroundColor = .lightGray

        let spacerView = UIView(frame: .zero)
        spacerView.backgroundColor = .darkGray

        let bottomView = UIView(frame: .zero)
        bottomView.withSize(.init(width: 0, height: 200))
        bottomView.backgroundColor = .lightGray


        let scrollView = UIScrollView(frame: .zero)
        addSubviews(scrollView)

        NSLayoutConstraint.activate([
            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
            scrollView.topAnchor.constraint(equalTo: topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])

        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.spacing = 8
        stackView.distribution = .fill
        scrollView.addSubview(stackView)

        stackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            // Attaching the content's edges to the scroll view's edges
            stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),

            // Satisfying size constraints
            stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])

        [topView, spacerView, bottomView].forEach  stackView.addArrangedSubview($0) 

在这种情况下，我希望我的UIStackView 仍会填充视图，并且只有在子视图导致其高度增长超出视图可见边界时才能滚动。

【问题讨论】：

您是否考虑过为此使用 UITableView？

我做了但是被底部视图将是水平滚动的UICollectionView 的想法推迟了。在这种情况下，这仍然是一种可接受的方法吗？

是的。你可以在 UITableView 页脚中有一个 UICollectionView。

啊，我明白了，然后简单地呈现包含我的其他项目的单行？

您可以添加另一个单元格，也可以使用页脚。我在下面添加了页脚的答案。

【参考方案1】：

使用带有 UICollectionView 作为页脚的 UITableView。

您可以在此处找到教程： https://ashfurrow.com/blog/putting-a-uicollectionview-in-a-uitableviewcell-in-swift/

这是为了添加一个collectionView作为页眉，但对于页脚也是一样的。

private let tableView: UITableView = 
    let view = UITableView(frame: .zero, style: .plain)
    view.translatesAutoresizingMaskIntoConstraints = false
    view.estimatedRowHeight = 44
    view.rowHeight = UITableView.automaticDimension
    view.keyboardDismissMode = .interactive
    view.tableFooterView = //Your Custom View with CollectionView here
    return view
()