✨NColumns

SwiftUI ⟩ Layout ⟩ LazyGrids ⟩ example ⟩

💈範例

⬆️ 需要： view.watermark()

// 🌀 usage: `GridItem() * 5`
extension GridItem {
    static func * (item: GridItem, n: Int) -> [GridItem] {
        Array(repeating: item, count: n)
    }
}

struct ContentView: View {
    
    // ⭐ as many columns as possible
    let adaptiveColumns = [
        GridItem(.adaptive(minimum: 80))
    ]
    
    // ⭐ 5 columns (flexible)
    let nColumns = GridItem(.flexible()) * 5    // 🌀 GridItem extension
    
    // ⭐ first column width fixed
    let firstColFixed = [
        GridItem(.fixed(100)),
        GridItem(.flexible()),
    ]
    
    var body: some View {
        VStack {
            HStack {
                NColumns(columns: firstColFixed)
                    // 🌀 View + .watermark()
                    .watermark(fgColor: .black, bgColor: .gray){ 
                        Text("first column fixed") 
                    }
                NColumns(columns: nColumns)
                    .watermark(fgColor: .black, bgColor: .gray){ 
                        Text("5 columns") 
                    }
            }
            NColumns(columns: adaptiveColumns)
                .watermark(fgColor: .black, bgColor: .gray){ 
                    Text("adaptive") 
                }
        }
    }
}

📦 NColumns

struct NColumns: View {
    
    let columns: [GridItem]
    
    var body: some View {
        ScrollView {
            // ⭐ use columns
            LazyVGrid(columns: columns, spacing: 20) {
                // ❓ how to show the border of each grid item?
                ForEach(1..<100) { 
                    Text("item \($0)")
                        .font(.caption)
                        .foregroundColor(.label2)
                        .padding([.horizontal])
                        .padding(.vertical, 6)
                        .border(Color.blue)        // text border
                }
            }
            .padding()
        }
        .frame(maxHeight: 300)
        .border(Color.pink)        // scroll view border
    }
}

📘 手冊

• SwiftUI ⟩ View Layout and Presentation ⟩

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

📗 參考

• Paul ⟩ How to position views in a grid using LazyVGrid and LazyHGrid - (💈範例)

❓

問：How to show the border of each grid item❓