SkillAgentSearch skills...

SwiftUILazyContainer

Lazy rendering and layouts in SwiftUI ScrollView

Install / Use

/learn @ciaranrobrien/SwiftUILazyContainer
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

SwiftUI LazyContainer

Lazy rendering and layouts in a SwiftUI ScrollView.

Get Started

Use lazyContainer to configure the scroll view for lazy rendering.

Use AltLazyVStack as a replacement for VStack or LazyVStack to only render its content when visible in the scroll view.

ScrollView {
    AltLazyVStack(data, contentHeight: 200) { element in
        /// Lazy content
    }
}
.lazyContainer()

Use LazyVMasonry to arrange subviews in a vertical masonry with lazy rendering.

ScrollView {
    LazyVMasonry(data, columns: 2, contentHeights: [.fraction(1/4), .fraction(1/5)]) { element in
        /// Lazy content
    }
}
.lazyContainer(renderingPadding: 16, rendersInSafeAreaEdges: .all)

Advanced Usage

Use template and lazySubviewTemplate to provide hidden template views for sizing lazy subviews.

ScrollView {
    VStack {
        AltLazyVStack(data, contentHeight: .template) { element in
            /// Lazy content
        }
    }
}
.lazyContainer {
    VStack {
        Text(verbatim: "Placeholder")
            .font(.headline)
        
        Text(verbatim: "Placeholder")
            .font(.subheadline)
    }
    .padding()
    .lineLimit(1)
    .lazySubviewTemplate()
}

Use the contentHeight closure to resolve subview heights for each element. Combine LazySubviewSize values with + or sum to dynamically build subview heights.

ScrollView {
    LazyVMasonry(data, columns: .adaptive(minSize: 140), spacing: 8) { element in
        /// Lazy content
    } contentHeight: { element in
        let imageHeight = LazySubviewSize.aspect(element.imageSize.width / element.imageSize.height)
        let titleHeight = LazySubviewSize.template(id: element.subtitle == nil ? 1 : 2)
        return imageHeight + titleHeight
    }
}
.lazyContainer {
    Text(verbatim: "Title Placeholder")
        .font(.headline)
        .padding()
        .lineLimit(1)
        .lazySubviewTemplate(id: 1)
    
    VStack {
        Text(verbatim: "Title Placeholder")
            .font(.headline)
        
        Text(verbatim: "Subtitle Placeholder")
            .font(.subheadline)
    }
    .padding()
    .lineLimit(1)
    .lazySubviewTemplate(id: 2)
}

See Examples for more.

Requirements

  • iOS 13.0+, macOS 10.15+, tvOS 13.0+, watchOS 6.0+, visionOS 1.0+
  • Xcode 15.0+

Installation

View on GitHub
GitHub Stars23
CategoryDevelopment
Updated3mo ago
Forks3

Languages

Swift

Security Score

87/100

Audited on Dec 14, 2025

No findings