ios – Learn how to group a set of images in a selected manner utilizing the present view dimension in SwiftUI

0
16
ios – Learn how to group a set of images in a selected manner utilizing the present view dimension in SwiftUI


I wish to obtain a selected design with 7 photos. The 7 photos include 5 squares (800x800px unique) and a couple of rectangle (400x200px unique). The top aim ought to seem like this instance:

this example

It needs to be 3 rows of images, row 1 consists of three squares, the place on is a few third of the row, row 2 has a rectangle and a sq. and the final row simply has a single rectangle. The Drawback I am dealing with is that once I add the view to the guardian, I get that final result:

outcome

To attain this structure I attempted to make use of a mixture of VStacks and HStack and tried to calculate the width of the photographs utilizing about 1/3 of the view with a GeometryReader.

import SwiftUI

struct OverviewTiles: View {
    var physique: some View {
        // TODO: There will likely be completely different designs so you should definitely look out for that
        GeometryReader { geo in
            let dimension = geo.dimension.width * 0.66
            VStack(spacing: 16) {
                HStack(spacing: 16) {
                    Picture("tiles_square")
                        .resizable()
                        .scaledToFit()
                        .body(width: dimension)
                    VStack(spacing: 16) {
                        Picture("tiles_square")
                            .resizable()
                            .scaledToFit()
                        Picture("tiles_square")
                            .resizable()
                            .scaledToFit()
                    }
                }
                HStack(spacing: 16) {
                    Picture("tiles_landscape")
                        .resizable()
                        .scaledToFit()
                        .body(width: dimension)
                    Picture("tiles_square")
                        .resizable()
                        .scaledToFit()
                }
                Picture("tiles_landscape")
                    .resizable()
                    .scaledToFit()
            }
            .body(maxWidth: .infinity, maxHeight: .infinity)
        }
        
    }
}

The View itself is instantiated inside a ScrollView. I am comparatively new to SwiftUI and I want to know if that is even the proper method. In the end I prefer to have this aspect react appropriately to orientation modifications, although perhaps the order of the pictures needs to be modified then. So, is utilizing GeometryReader the proper manner or are there higher methods to attain this?

Thanks very a lot, for serving to out.

LEAVE A REPLY

Please enter your comment!
Please enter your name here