CODEWITHSUNDEEP
iosswiftswiftui
Muhammad Ibtihaj Tahir
Muhammad Ibtihaj Tahir

Reputation: 636

Fill Rectangle without disturbing the geometry of HStack

How to fill the black Rectangle on the left to fit the height of the red and blue color combined.

Basically, the black color instead of being in the middle like this,

Container

Should be filled to occupy the remaining space.

HStack(spacing: 1) {
            
            Color.black
                .aspectRatio(contentMode: .fit)
            
            VStack(alignment: .trailing, spacing: 1) {
                
                Color.red
                    .aspectRatio(contentMode: .fit)
                
                Color.blue
                    .aspectRatio(contentMode: .fit)
            }
            
        }

Upvotes: 1

Views: 345

Answers (1)

Asperi
Asperi

Reputation: 258541

Here is probably the simplest approach...

enter image description here

var body: some View {
    HStack(spacing: 1) {

        VStack(spacing: 0) {
            Color.clear
                .aspectRatio(contentMode: .fit)
            Color.clear
                .aspectRatio(contentMode: .fit)
        }
        .overlay(Color.black)

        VStack(alignment: .trailing, spacing: 1) {
            Color.red
                .aspectRatio(contentMode: .fit)
            Color.blue
                .aspectRatio(contentMode: .fit)
        }
    }
}

Alternate approach with alignment guides was provided in my other answer https://stackoverflow.com/a/60346544/12299030.

Alternate approach with view preferences was provided in my other answer https://stackoverflow.com/a/63165931/12299030.

Upvotes: 3

Related Questions