CODEWITHSUNDEEP
swiftswiftui
Petesta
Petesta

Reputation: 1775

How to create custom sized squares for a grid layout in SwiftUI

I'm new to SwiftUI and have been looking at documentation and tutorials but can't seem to grasp how to create squares of whatever size I want to fit across in a row. For example, if I wanted three, four, or more to fit in a row.

I thought I'd use GeometryReader since I shouldn't be hardcoding values for frame? How do I accomplish this and would I go about making sure it works on other different sized devices?

Here's an example of what I'm trying. Have three items across. When I do this, the third square is running off of the screen.

GeometryReader { geo in
    HStack {
        Rectangle()
            .fill(Color.black)
            .frame(width: geo.size.width / 3, height: 135)
        Rectangle()
            .fill(Color.black)
            .frame(width: geo.size.width / 3, height: 135)
        Rectangle()
            .fill(Color.black)
            .frame(width: geo.size.width / 3, height: 135)
    }  
}

Upvotes: 2

Views: 1122

Answers (1)

Ketan Odedra
Ketan Odedra

Reputation: 1283

In other option you can even use GridItem for that,

check below code,

var columns : [GridItem] = [
        GridItem(.flexible(), spacing: 8),
        GridItem(.flexible(), spacing: 8),
        GridItem(.flexible(), spacing: 8)
    ]

    var body: some View {

        ScrollView() {
            LazyVGrid(columns: columns) {
                Rectangle()
                    .fill(Color.pink)
                    .frame(height: 135)

                Rectangle()
                    .fill(Color.black)
                    .frame(height: 135)

                Rectangle()
                    .fill(Color.green)
                    .frame(height: 135)
            }
            .padding(.vertical)
        }
}

enter image description here

Upvotes: 1

Related Questions