Largeurs égales de sous-vues avec SwiftUI

Question

J'essaie de construire une interface utilisateur watchOS simple avec SwiftUI avec deux informations côte à côte au-dessus d'un bouton.

J'aimerais que chaque côté (représenté par un VStack dans un HStack) occupe la moitié de la largeur disponible (il s'agit donc d'un partage 50/50 pair dans la vue parent jaune) divisé où le caractère | est centré sur le bouton dans l'exemple ci-dessous.

Je veux que le texte Court et Plus long !!! soit centré dans les 50% de chaque côté.

J'ai commencé avec ce code, pour mettre les éléments en place et montrer les limites de certaines des différentes piles:

var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

Ce qui m'a donné ce résultat:

Ensuite, quand il s'agit de faire chaque côte à côte VStack 50% de la largeur disponible, je suis bloqué. J'ai pensé que cela devrait fonctionner pour ajouter .relativeWidth(0.5) à chaque VStack, ce qui devrait, si je comprends bien, faire de chaque VStack la moitié de la largeur de sa vue parent (le HStack, avec le fond jaune):

var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .relativeWidth(0.5)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .relativeWidth(0.5)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

Mais voici le résultat que j'obtiens:

Comment puis-je obtenir le comportement que je souhaite avec SwiftUI?

---

Mise à jour: Après avoir examiné la documentation SwiftUI plus, je vois l'exemple ici qui définit un cadre et définit ensuite une largeur relative dans par rapport à ce cadre, alors peut-être que je ne suis pas censé utiliser relativeWidth de cette façon?

Je suis un peu plus près de ce que je veux avec le code suivant:

var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

ce qui produit ce résultat:

Maintenant, j'essaie de comprendre ce qui crée cet espace supplémentaire au milieu entre les deux VStacks. Jusqu'à présent, expérimenter pour se débarrasser du rembourrage et ignorer les zones sûres ne semble pas l'affecter.

Answer 1

Je ne sais toujours pas quand et comment relativeWidth est censé être utilisé, mais j'ai pu réaliser ce que je voulais sans l'utiliser. ( EDIT 18 juillet 2019: Selon les notes de publication d'iOS 13 Beta 4, relativeWidth est désormais obsolète)

Dans la dernière mise à jour de ma question, j'avais un espacement supplémentaire entre les deux côtés et j'ai réalisé que c'était l'espacement par défaut entrant sur le HStack et j'ai pu le supprimer en définissant son espacement sur 0. Voici la code final et résultat:

var body: some View {
    VStack {
        HStack(spacing: 0) {

            VStack {
                Text("Short").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

Et voici le résultat: