UIScrollView无法正确显示子视图问题求助

嘿，我看你已经初始化了ScrollView的数据，但还没完成把数据转成子视图并添加到ScrollView的关键步骤——这就是视图不显示的核心原因！另外还有几个UIScrollView的必做设置，我帮你梳理并补全代码：

常见问题点 #

• 没有将数据对应的子视图添加到UIScrollView中
• 未设置UIScrollView的contentSize，导致ScrollView无法识别内容范围
• 结构体命名不符合Swift大驼峰规范（非功能性问题，但建议修正）

完整修正代码 #

// 修正命名规范，使用Swift推荐的大驼峰格式
struct ScrollViewItemData {
    let title: String?
    let image: UIImage?
}

// 自定义子视图，封装每个数据项的UI展示
class ScrollViewItemView: UIView {
    private let titleLabel = UILabel()
    private let itemImageView = UIImageView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 给视图配置对应的数据
    func configure(with data: ScrollViewItemData) {
        titleLabel.text = data.title
        itemImageView.image = data.image
    }
    
    private func setupUI() {
        // 配置ImageView布局（这里用Frame示例，也可以替换成AutoLayout）
        itemImageView.frame = CGRect(x: 20, y: 20, width: frame.width - 40, height: frame.height - 60)
        itemImageView.contentMode = .scaleAspectFit
        addSubview(itemImageView)
        
        // 配置Label布局
        titleLabel.frame = CGRect(x: 20, y: frame.height - 30, width: frame.width - 40, height: 20)
        titleLabel.textAlignment = .center
        addSubview(titleLabel)
        
        // 给子视图加一点视觉优化
        backgroundColor = .white
        layer.cornerRadius = 8
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.1
        layer.shadowOffset = CGSize(width: 0, height: 2)
    }
}

class ViewController: UIViewController {
    @IBOutlet weak var scrollView: UIScrollView!
    var scrollViewData = [ScrollViewItemData]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 初始化数据（补全你截断的代码）
        scrollViewData = [
            ScrollViewItemData(title: "First", image: #imageLiteral(resourceName: "iPhone 8 Copy 2")),
            ScrollViewItemData(title: "Second", image: #imageLiteral(resourceName: "你的第二个图片资源名"))
        ]
        
        // 调用方法添加子视图到ScrollView
        setupScrollViewItems()
    }
    
    private func setupScrollViewItems() {
        let itemWidth: CGFloat = 280
        let itemHeight: CGFloat = 350
        let spacing: CGFloat = 20
        
        // 循环创建每个子视图并添加到ScrollView
        for (index, data) in scrollViewData.enumerated() {
            let itemFrame = CGRect(
                x: spacing + CGFloat(index) * (itemWidth + spacing),
                y: spacing,
                width: itemWidth,
                height: itemHeight
            )
            let itemView = ScrollViewItemView(frame: itemFrame)
            itemView.configure(with: data)
            scrollView.addSubview(itemView)
        }
        
        // 关键：设置ScrollView的contentSize，没有它ScrollView不知道内容范围
        let totalWidth = spacing + CGFloat(scrollViewData.count) * (itemWidth + spacing)
        scrollView.contentSize = CGSize(width: totalWidth, height: scrollView.bounds.height)
        
        // 可选优化：开启横向滚动，隐藏垂直滚动指示器
        scrollView.showsVerticalScrollIndicator = false
        scrollView.alwaysBounceHorizontal = true
    }
}

关键步骤说明 #

1. 自定义子视图：创建ScrollViewItemView来封装每个数据项的UI，让代码更模块化
2. 添加子视图：循环遍历数据数组，创建每个子视图并添加到UIScrollView
3. 设置contentSize：根据子视图的数量和尺寸计算出ScrollView的内容宽度，这是ScrollView能正常滚动和显示的核心设置
4. 布局调整：如果需要垂直滚动，只需要修改itemFrame的y坐标和contentSize的height即可，逻辑完全通用

内容的提问来源于stack exchange，提问作者Tung Vu Duc