# ScrollVGridForEach

[SwiftUI](../../..) ⟩ [Layout](..) ⟩ [Grids]() ⟩&#x20;

{% hint style="success" %}
👔 ScrollVGridForEach = [scrollview](../../../control/scrollview "mention") + LazyVGrid + [foreach](../../grouping/foreach "mention")&#x20;
{% endhint %}

{% tabs %}
{% tab title="👔 ScrollVGridForEach" %}
⬆️ 需要： [vgridforeach](vgridforeach "mention")

```swift
// (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
    }
}

```
{% endtab %}

{% tab title="💈範例" %}
* [testsvgfe](scrollvgridforeach/testsvgfe "mention") - test **ScrollVGridForEach**.
{% endtab %}

{% tab title="⬆️ 需要" %}
* [vgridforeach](vgridforeach "mention")
{% endtab %}

{% tab title="⬇️ 應用" %}
* [adaptive-column](griditem/adaptive-column "mention")
* [flexible-column](griditem/flexible-column "mention")
* [layout-algorithm](layout-algorithm "mention")
{% endtab %}

{% tab title="👥 相關" %}
* uses [scrollview](../../../control/scrollview "mention").
* uses [](<> "mention") layout.
{% endtab %}
{% endtabs %}

## History

{% tabs %}
{% tab title="✏️" %}
1. 2022.02.15
{% endtab %}

{% tab title="1" %}
⬆️ 需要： [vgridforeach](vgridforeach "mention")

```swift
// ------------------------------
//     📦 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
    }
}
```
{% endtab %}
{% endtabs %}
