👔ScrollVGridForEach

SwiftUI ⟩ Layout ⟩ Grids ⟩

👔 ScrollVGridForEach = ScrollView + LazyVGrid + ForEach

👔 ScrollVGridForEach

⬆️ 需要： VGridForEach

// (r) refactor (f) fix
// 2022.02.15 (r) : param `data` -> `indices`
//                : param exchange order `indices` <-> `columns`
//                : param `content` -> `cellViewAtIndex`
//            (f) : @ViewBuilder cellViewAtIndex

import SwiftUI

// ------------------------------
//     👔 ScrollVGridForEach
// ------------------------------

/// 👔 ScrollVGridForEach = ScrollView + LazyVGrid + ForEach
public struct ScrollVGridForEach<Content: View>: View {
    
    // properties
    let indices: Range<Int>
    let columns: [GridItem]
    let alignment  : HorizontalAlignment    // alignment in cell
    let rowSpacing : CGFloat?               // row spacing
    let pinnedViews: PinnedScrollableViews  // ?
    @ViewBuilder let cellViewAtIndex:  (Int) -> Content // ⭐ ViewBuilder
    
    // view body
    public var body: some View {
        ScrollView(.vertical){              // ScrollView + VGridForEach
            VGridForEach(                   // 👔 VGridForEach
                indices, 
                columns: columns, 
                alignment: alignment, 
                rowSpacing: rowSpacing, 
                pinnedViews: pinnedViews, 
                cellViewAtIndex: cellViewAtIndex
            ) 
        }
    }
}

// convenience init
extension ScrollVGridForEach {
    public init(
        _ indices: Range<Int>,
        columns  : [GridItem],
        alignment: HorizontalAlignment     = .center,
        rowSpacing : CGFloat?              = nil,
        pinnedViews: PinnedScrollableViews = .init(),
        // ⭐ ViewBuilder
        @ViewBuilder cellViewAtIndex: @escaping (Int) -> Content
    ) {
        // ForEach
        self.indices = indices
        // LazyVGrid
        self.columns     = columns
        self.alignment   = alignment
        self.rowSpacing  = rowSpacing
        self.pinnedViews = pinnedViews
        self.cellViewAtIndex = cellViewAtIndex
    }
}

💈範例

• TestSVGFE - test ScrollVGridForEach.

⬆️ 需要

• VGridForEach

⬇️ 應用

• adaptive column

• flexible column

• grid layout algorithm

👥 相關

• uses ScrollView.

• uses grids layout.

History

✏️

1. 2022.02.15

1

⬆️ 需要： VGridForEach

// ------------------------------
//     📦 ScrollVGridForEach
// ------------------------------

public struct ScrollVGridForEach<Content: View>: View {
    // properties
    let columns: [GridItem]
    let data     : Range<Int>
    let alignment: HorizontalAlignment
    let spacing  : CGFloat?
    let pinnedViews: PinnedScrollableViews
    let content  : (Int) -> Content
    // view body
    public var body: some View {
        ScrollView(.vertical){
            VGridForEach(data, columns: columns, alignment: alignment, spacing: spacing, pinnedViews: pinnedViews, content: content) 
        }
    }
}

// convenience init
extension ScrollVGridForEach {
    public init(
        _ data   : Range<Int>,
        columns  : [GridItem],
        alignment: HorizontalAlignment     = .center,
        spacing  : CGFloat?                = nil,
        pinnedViews: PinnedScrollableViews = .init(),
        content  : @escaping (Int) -> Content
    ) {
        // ForEach
        self.data = data
        // LazyVGrid
        self.columns     = columns
        self.alignment   = alignment
        self.spacing     = spacing
        self.pinnedViews = pinnedViews
        self.content     = content
    }
}