Rellenar rectángulo sin alterar la geometría de HStack

Question

Cómo rellenar el rectángulo negro de la izquierda para que se ajuste a la altura del color rojo y azul combinados.

Básicamente, el color negro en lugar de estar en el medio así,

Debe llenarse para ocupar el espacio 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

Este es probablemente el enfoque más simple ...

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

En mi otra respuesta se proporcionó un enfoque alternativo con guías de alineación https://stackoverflow.com/a/60346544/12299030.

En mi otra respuesta se proporcionó un enfoque alternativo con preferencias de vista https://stackoverflow.com/a/63165931/12299030.