โจNColumns
Last updated
Last updated
SwiftUI โฉ Layout โฉ LazyGrids โฉ example โฉ
โฌ๏ธ ้่ฆ๏ผ .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")
}
}
}
}
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 โฉ
ๅ๏ผHow to show the border of each grid itemโ