Как расположить 4 элемента, держа один в центре

Question

Я почти новичок в SwiftUI и не могу правильно управлять макетом компонента.

Я начал с этого простого макета:

используя этот код:

var body: some View {
    VStack(alignment: .center) {
        HStack {
            Text("Item 1")
                .border(Color.white)
                .padding(.leading, 20)

            Spacer()

            Text("Item 2")
                .border(Color.white)
                .alignmentGuide(.hCenter, computeValue: { d in d[HorizontalAlignment.center] })

            Spacer()

            Text("Item 3")
                .border(Color.white)
                .padding(.trailing, 20)
        }
        .frame(maxWidth: .infinity, minHeight: 40)
        .background(Color.red)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.blue)
}

Теперь мне нужно добавить еще один элемент между Элементом 1 и Элементом 2, держа Элемент 2 в центре экрана.

Я думал использовать другой HStack следующим образом:

var body: some View {
    VStack(alignment: .center) {
        HStack {

            HStack {
                Text("Item 11")
                .border(Color.white)
                    .padding(.leading, 20)

                Text("Item 12")
                .border(Color.white)
                    .padding(.trailing, 20)
            }
            .frame(minHeight: 40)
            .background(Color.yellow)

            Spacer()

            Text("Item 2")
                .border(Color.white)
                .alignmentGuide(.hCenter, computeValue: { d in d[HorizontalAlignment.center] })

            Spacer()

            Text("Item 3")
                .border(Color.white)
                .padding(.trailing, 20)
        }
        .frame(maxWidth: .infinity, minHeight: 40)
        .background(Color.red)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.blue)
}

К сожалению, результат не тот, который я ожидал.

• Пункт 2 больше не центрируется
• Добавление разделителя между Item11 и Item12 (чтобы держать их на расстоянии) еще хуже, потому что Item2 перемещается еще дальше вправо.

Я играл с GeometryReader и HorizontalAlignment без особого успеха.

Какой правильный подход к компонентам макета в SwiftUI?

Answer 1

На вопрос, как это сформулировано здесь, самое простое решение (однако, конечно, реальные ожидания могут отличаться)

var body: some View {
    VStack {
        HStack {
            HStack {
                Text("Item 11")
                    .border(Color.white)
                    .padding(.leading, 20)

                Text("Item 12")
                    .border(Color.white)
                    .padding(.trailing, 20)
            }
            .frame(minHeight: 40)
            .background(Color.yellow)

            Spacer()
            Text("Item 3")
                .border(Color.white)
                .padding(.trailing, 20)
        }
        .frame(maxWidth: .infinity, minHeight: 40)
        .background(Color.red)
        .overlay(Text("Item 2")             // << the only item in overlay,
                 .border(Color.white))      // << so centered

    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.blue)
}