Ctrlk

📦GridItem

The spacing of the last GridItem is ignored.

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

此範例說明如何使用 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)
    }
}

Previousgrid layout algorithm Nextadaptive column

Last updated 9 months ago

Was this helpful?