I have a bunch of Buttons
in LazyVGrid
as shown in the picture below. I want to show a number near the top-left corner of a button. For a particular iOS device model, I can just offset the position of a number. But this approach can be terribly wrong if I have an iPad. Is there a way of getting the size of the GridItem
View
? If there isn't, is there an effective way of showing a number near the top-left corner regardless of the device model? Thanks.
import SwiftUI
struct ContentView: View {
private let cols = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]
var body: some View {
LazyVGrid(columns: cols) {
ForEach(0...30, id: \.self) { item in
Button {
} label: {
Image(systemName: "\(item).circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(.orange)
}
.overlay {
Text("0")
.font(.caption)
.foregroundStyle(.blue)
.offset(x: -20, y: -20)
}
}
}
}
}
The overlay
modifier takes an alignment
argument which defaults to .center
. Try passing .topLeading
instead of using .offset
:
Button { } label: {
Image(systemName: "\(item).circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(.orange)
}
.overlay(alignment: .topLeading) {
// ^^^^^^^^^^^^^^^^^^^^^^ 🟢 ADD THIS
Text("0")
.font(.caption)
.foregroundStyle(.blue)
}