📦GridItem

SwiftUI ⟩ Layout ⟩ LazyGrids ⟩

The spacing of the last GridItem is ignored.

🔴 主題

• adaptive column - 說明 adaptive column 如何計算欄位數量與寬度。

⭐️ 重點

The height of a row in a LazyVGrid is driven by the height of the tallest cell.

💈範例

此範例說明如何使用 GridItem 與 LazyVGrid 的參數。

struct ContentView: View {
    
    // 3 columns
    let threeColumns = [
    
        // first col
        GridItem(                   // controls: size, spacing, alignment
            .fixed(60),             // ⭐️ column width (enum GridItem.Size)
            spacing  : 10,          // ⭐️ space to next COLUMN
            alignment: .topTrailing // ⭐️ alignment in a CELL
        ),
        
        // second col
        GridItem(.fixed(120), spacing: 30, alignment: .center),
        
        // ⭐️ last column's `spacing` is ignored
        GridItem(.fixed(100), spacing: 10, alignment: .bottomTrailing),
    ]
    
    var body: some View {
        // vertical scroll view (by default)
        ScrollView {
            // ⭐️ VERTICAL columns
            // - cells flow HORIZONTALLY
            LazyVGrid(
                columns: threeColumns, // ⭐️ columns setting
                alignment: .center,    // ⭐️ for the cells as a whole
                spacing: 10            // ⭐️ space between ROWS
            ) {
                ForEach(0..<100) { i in
                    VStack {
                        switch i {
                        case 3: rect(.pink)
                        case 4: rect(.green).frame(height: 50)
                        case 5: rect(.blue).frame(width: 60, height: 30)
                        case 6: rect(.yellow).frame(width: 80)
                        default: rect(.gray4).frame(height: 30)
                        }
                    }.overlay(Text("\(i)"))
                }
            }
            .border(Color.orange)    // grid border
            .frame(width: 500)
            .padding(20)
        }
        .frame(height: 200)
        .border(Color.blue)           hi// scroll view border
    }
}

extension ContentView {
    func rect(_ color: Color) -> some View {
        Rectangle().fill(color)
    }
}

🌀 GridItem

⬆️ 需要： Repeatable

// ⭐️ GridItem + 🅿️ Repeatable
extension GridItem: Repeatable {}
let columns = GridItem(.flexible()) * 2

📘 手冊

• Swift ⟩ Array ⟩ .init(repeating:count:)

• SwiftUI ⟩ View Layout and Presentation ⟩

  • LazyVGrid (struct)

  • LazyHGrid (struct)

  • GridItem (struct) - control alignment, spacing, size (width or height).

📗 參考

• SwiftUI Lab ⟩ Impossible Grids with SwiftUI ⟩ Anatomy of a Grid ⭐️ - (💈範例)

❓

問：「紅色」與「黃色」色塊 frame 沒有指定 height 卻縮到最小高度❓