Как расположить центральную кнопку внутри интерфейса VStack Swift

Question

var body: some View {
    VStack(alignment: .leading) {
        Text("Title")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 36.0))

        ...

        Button(action: {}){
            Text("Create")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 24.0))
            .padding(20)
            .foregroundColor(Color.white)
            .background(Color.purple)
            .cornerRadius(12)
        }


    }.padding(20)
}

Я хочу разные выравнивания для этих двух конкретных элементов. Заголовок должен иметь начальное выравнивание, но с другой стороны кнопка расположена в центре. Теперь я установил выравнивание VStack на ведущие. Я не очень хорошо знаком с пользовательским интерфейсом Swift, поэтому первая идея состоит в том, чтобы использовать несколько вертикальных стеков с различным выравниванием, но я предполагаю, что это можно сделать проще. Если я добавлю руководство по выравниванию к кнопке, оно тоже не будет работать.

Answer 1

Я бы использовал HStack, как показано ниже

var body: some View {
    VStack(alignment: .leading) {
        Text("Title")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 36.0))

        HStack {
            Spacer()
            Button(action: {}){
                Text("Create")
                .bold()
                .font(Font.custom("Helvetica Neue", size: 24.0))
                .padding(20)
                .foregroundColor(Color.white)
                .background(Color.purple)
                .cornerRadius(12)
            }
            Spacer()
        }
    }.padding(20)
}

Answer 2

Вы можете использовать GeometryReader для этого:

Представление контейнера, которое определяет его содержимое как функцию его собственного размера и координатного пространства.

https://developer.apple.com/documentation/swiftui/geometryreader

GeometryReader { geometry in
    VStack(alignment: .leading) {
        Text("Title")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 36.0))

        Button(action: {

        }) {
            Text("Create")
                .bold()
                .font(Font.custom("Helvetica Neue", size: 24.0))
                .padding(20)
                .foregroundColor(Color.white)
                .background(Color.purple)
                .cornerRadius(12)
                .frame(width: geometry.size.width / 2, height: geometry.size.height / 2, alignment: .center)
        }
    }.padding(20)
}