Swift：如何将垂直UIScrollView转为横向滚动？

你遇到的问题是因为横向滚动场景下，原有的约束配置和视图尺寸设置不匹配，导致UIScrollView没有可滚动的空间。以下是具体的修正方案：

核心问题分析 #

1. 错误的容器约束：原代码中给scrollViewContainer添加了widthAnchor.constraint(equalTo: scrollView.widthAnchor)，这会强制容器宽度和滚动视图一致，无法横向扩展，自然触发不了滚动。
2. 子视图缺少宽度定义：横向排列时，子视图没有明确的宽度约束，StackView无法计算出超出滚动视图宽度的总宽度，没有滚动的必要条件。

修正后的完整代码 #

struct CALayerScrollView: UIViewRepresentable {
    func makeUIView(context: Context) -> some UIView {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width / 2, height: UIScreen.main.bounds.height / 2))
        let scrollView: UIScrollView = {
            let scrollView = UIScrollView()
            scrollView.translatesAutoresizingMaskIntoConstraints = false
            return scrollView
        }()

        let scrollViewContainer: UIStackView = {
            let view = UIStackView()
            view.axis = .horizontal // 切换为横向排列
            view.spacing = 10
            view.translatesAutoresizingMaskIntoConstraints = false
            return view
        }()

        let redView: UIView = {
            let view = UIView()
            view.widthAnchor.constraint(equalToConstant: 500).isActive = true // 给横向视图设置宽度
            view.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true // 高度匹配滚动视图
            view.backgroundColor = .red
            return view
        }()

        let blueView: UIView = {
            let view = UIView()
            view.widthAnchor.constraint(equalToConstant: 200).isActive = true
            view.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
            view.backgroundColor = .blue
            return view
        }()

        let greenView: UIView = {
            let view = UIView()
            view.widthAnchor.constraint(equalToConstant: 1200).isActive = true
            view.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
            view.backgroundColor = .green
            return view
        }()
        
        view.addSubview(scrollView)
        scrollView.addSubview(scrollViewContainer)
        scrollViewContainer.addArrangedSubview(redView)
        scrollViewContainer.addArrangedSubview(blueView)
        scrollViewContainer.addArrangedSubview(greenView)

        // 批量激活约束，更清晰
        NSLayoutConstraint.activate([
            // 滚动视图与父视图的约束保持不变
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            
            // 容器视图适配横向滚动的约束
            scrollViewContainer.topAnchor.constraint(equalTo: scrollView.topAnchor),
            scrollViewContainer.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            scrollViewContainer.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            scrollViewContainer.heightAnchor.constraint(equalTo: scrollView.heightAnchor), // 固定高度，宽度由内容撑开
        ])

        return view
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) { }
}

关键修改点 #

• 切换StackView方向：将scrollViewContainer的axis设置为.horizontal，实现横向排列。
• 子视图尺寸调整：给每个子视图添加widthAnchor约束，明确横向宽度；同时将子视图的heightAnchor绑定到滚动视图的高度，保证纵向填充。
• 容器约束修正：移除原有的容器宽度等于滚动视图宽度的约束，改为绑定容器高度等于滚动视图高度，让容器宽度由内部子视图的总宽度自动计算，当总宽度超过滚动视图宽度时，就会触发横向滚动。

内容的提问来源于stack exchange，提问作者Kelvin Jou