Preencher retângulo sem perturbar a geometria de HStack

Question

Como preencher o retângulo preto à esquerda para ajustar a altura da cor vermelha e azul combinadas.

Basicamente, a cor preta em vez de estar no meio assim,

Deve ser preenchido para ocupar o espaço restante.

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

Answer 1

Esta é provavelmente a abordagem mais simples ...

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

A abordagem alternativa com guias de alinhamento foi fornecida em minha outra resposta https://stackoverflow.com/a/60346544/12299030.

Uma abordagem alternativa com preferências de visualização foi fornecida em minha outra resposta https://stackoverflow.com/a/63165931/12299030.