👔VGridForEach

SwiftUI ⟩ Layout ⟩ Grids ⟩

👔 VGridForEach

// (*) v.1 (f) fix (r) refactor (+) new
// ---------------------------------------------------
// 2020.01.20 (*) : + VGridForEach, ScrollVGridForEach
// 2022.02.15 (f) : id: \.self
//            (r) : param order, rename `content` as `cellViewAtIndex`
//            (f) : @ViewBuilder cellViewAtIndex

import SwiftUI

// ------------------------
//     👔 VGridForEach
// ------------------------

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

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

💈範例

• adaptive column

• flexible column

• grid layout algorithm

• TestLittleSquares

📘 手冊

• SwiftUI ⟩ Collection Containers ⟩

  • ForEach (struct)

  • LazyVGrid (struct)

• Swift ⟩ Basic Behaviors ⟩ Identifiable

⬇️ 應用

• ScrollVGridForEach

👥 相關

• ForEach

History

✏️

1. 2022.02.15

1

// History:
// 2020.01.20 : (first version) + VGridForEach, ScrollVGridForEach

import SwiftUI

// ------------------------
//     📦 VGridForEach
// ------------------------

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

// convenience init
extension VGridForEach {
    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
    }
}