Search code examples
iosswiftxcodeswiftui

SwiftUI center items in LazyVGrid


I am new to SwiftUI and am trying to center elements inside the LazyVGrid View.

Here is what I have currently:

enter image description here

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.


Solution

  • 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()
            }
        }
    }
    

    LazyVGrid - Justified

    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()
            }
        }
    }
    

    LazyHGrid - Justified

    And as mentioned in the comments if you set a maximum they will be centered/justified to that max

    LazyHGrid w/ 3 rows with a maximum of 40 LazyHGrid w/ 3 rows

    LazyVGrid w/ 5 columns with a maximum of 40 LazyVGrid w/ 5 columns