Равная ширина подпредставлений с SwiftUI

Question

Я пытаюсь создать простой пользовательский интерфейс watchOS с SwiftUI с двумя частями информации, расположенными рядом над кнопкой.

Я бы хотел, чтобы каждая сторона (представленная как VStack в пределах HStack) занимала половину доступной ширины (так что в желтом родительском виде это разделение на 50/50), разделенная где | символ центрируется на кнопке в примере ниже.

Я хочу, чтобы текст Short и Longer !!! каждому центрировался в пределах 50% каждой стороны.

Я начал с этого кода, чтобы получить элементы на месте и показать границы некоторых стеков:

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

Который дал мне этот результат:

Затем, когда дело доходит до того, чтобы сделать каждую бок о бок VStack 50% доступной ширины, я застрял. Я думал, что это должно работать, чтобы добавить .relativeWidth(0.5) к каждому VStack, что должно, как я понимаю, сделать каждую VStack половину ширины его родительского представления (HStack, с желтым фоном):

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

Но вот результат, который я получаю:

Как я могу получить желаемое поведение с SwiftUI?

---

Обновление: После просмотра документации SwiftUI я вижу пример , который устанавливает кадр, а затем определяет относительную ширину по сравнению с этим кадром, так что, возможно, я не предполагается использовать relativeWidth таким образом?

Я на шаг ближе к тому, что хочу, с помощью следующего кода:

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

, который дает этот результат:

Теперь я пытаюсь выяснить, что создает дополнительное пространство в середине между двумя VStack с. Пока что эксперименты по избавлению от отступов и игнорированию безопасных зон, похоже, не влияют на это.

Answer 1

Я все еще не понимаю, когда и как предполагается использовать relativeWidth, но я смог достичь желаемого результата, не используя его.( РЕДАКТИРОВАТЬ 18 июля 2019 года: Согласно примечаниям к выпуску iOS 13 Beta 4, relativeWidth теперь устарело)

В последнем обновлении моего вопроса у меня был некоторый дополнительный интервал между двумясторон, и понял, что это был интервал по умолчанию на HStack, и я смог удалить его, установив его интервал на 0. Вот окончательный код и результат:

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

А вотрезультат: