Центр обзора по горизонтали в SwiftUI

Question

Как я могу центрировать по горизонтали View (Image) в HStack?Я хочу, чтобы кнопка была выровнена по левому краю, а изображение было центрировано по горизонтали.

В настоящее время у меня есть эта структура:

VStack {
        HStack {
            Button(action: {
                print("Tapped")
            }, label: {
                Image("left-arrow")
                    .resizable()
                    .frame(width: 30, height: 30, alignment: .leading)
            }).padding(.leading, 20)

            Spacer()

            Image("twitter-logo")
                .resizable()
                .frame(width: 30, height: 30, alignment: .center)

        }
        Spacer()
    }

Что дает мне это:

Но яхочу добиться этого:

Обновление:

Answer 1

Вы можете вставить два HStack в ZStack и разместить распорки соответственно для горизонтального расстояния. Вставьте все это в VStack с Spacer(), чтобы все поднялось наверх.

struct ContentView : View {
var buttonSize: Length = 30
var body: some View {
    VStack {
        ZStack {
            HStack {
                Button(action: {

                }, label: {
                    Image(systemName: "star")
                        .resizable()
                        .frame(width: CGFloat(30), height: CGFloat(30), alignment: .leading)
                }).padding(.leading, CGFloat(20))

                Spacer()
            }

            HStack {
                Image(systemName: "star")
                    .resizable()
                    .frame(width: CGFloat(30), height: CGFloat(30), alignment: .center)
            }
        }
        Spacer()
    }
}

}

Примечание. Во втором HStack изображение должно автоматически выравниваться по центру, но если это не так, вы можете поместить Spacer() до и после изображения.

Редактировать: добавлены VStack и Spacer() для перемещения всего наверх, как хотел ОП.

Редактировать 2: убрано заполнение для изображения, потому что это привело к небольшому смещению изображения от центра. Поскольку он сам по себе HBox и выровнен по центру, он не нуждается в заполнении.

Answer 2

Как насчет сохранения размера кнопки в свойстве и добавления к изображению отрицательного отступа? И обратите внимание на дополнительную проставку после изображения.

struct ContentView: View {

    var buttonSize: Length = 30

    var body: some View {
        VStack {
            HStack {
                Button(action: {
                    print("Tapped")
                }, label: {
                    Image(systemName: "star")
                        .resizable()
                        .frame(width: buttonSize, height: buttonSize, alignment: .leading)
                })
                Spacer()
                Image(systemName: "star")
                    .resizable()
                    .frame(width: 30, height: 30, alignment: .center)
                    .padding(.leading, -buttonSize)
                Spacer()
            }
            Spacer()
        }
    }
}

Результат: