I am new to SwiftUI and am trying to center elements inside the LazyVGrid
View.
Here is what I have currently:
Using:
var body: some View {
ZStack {
Color(red: 75/255, green: 0, blue: 130/255).ignoresSafeArea()
VStack {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 30))], alignment: .center, spacing: 10) {
let letters = wordToArray(word: testWord)
ForEach(Array(letters.enumerated()), id: \.offset) { letter in
Text(String(letter.element).capitalized)
.foregroundColor(.blue)
.frame(width:30, height: 40)
.background(Color.yellow)
.cornerRadius(5)
}
}
.padding()
}
}
}
But as you can see, this only aligns the elements to the left - I also do not know the number of characters that I may need to display. I would also like the keep the spacing between them the same as above.
Any help would be greatly appreciated!
Thanks.
2 options
struct CenteredLVSView: View {
@State var letters: [String] = ["A", "B", "C", "D", "E","A", "B", "C", "D", "E","A", "B", "C", "D", "E"]
//Specify column count and it will justify/center by width
@State var columnCount: Int = 5
var body: some View {
ZStack {
Color(red: 75/255, green: 0, blue: 130/255).ignoresSafeArea()
LazyVGrid(columns: Array(repeating: GridItem(.flexible(minimum: 30
//If you set max it will center on width if smaller than max, uncomment below
//, maximum: 40
)), count: columnCount), spacing: 10){
ForEach(Array(letters.enumerated()), id: \.offset) { letter in
Text(String(letter.element).capitalized)
.foregroundColor(.blue)
.frame(width:30, height: 40)
.background(Color.yellow)
.cornerRadius(5)
}
}
.padding()
}
}
}
Change to LazyHGrid
struct CenteredLVSView: View {
@State var letters: [String] = ["A", "B", "C", "D", "E","A", "B", "C", "D", "E","A", "B", "C", "D", "E"]
//Specify row count and it will justify/center height
@State var rowCount: Int = 5
var body: some View {
ZStack {
Color(red: 75/255, green: 0, blue: 130/255).ignoresSafeArea()
LazyHGrid(rows: Array(repeating: GridItem(.flexible(minimum: 30
//If you set max it will center if smaller than max, height uncomment below
//, maximum: 40
)), count: rowCount), spacing: 10){
ForEach(Array(letters.enumerated()), id: \.offset) { letter in
Text(String(letter.element).capitalized)
.foregroundColor(.blue)
.frame(width:30, height: 40)
.background(Color.yellow)
.cornerRadius(5)
}
}
.padding()
}
}
}
And as mentioned in the comments if you set a maximum
they will be centered/justified to that max