How to center button inside VStack Swift UI

5
votes
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)
}

I want different alignments for these two particular elements. Title must have a leading alignment, but on the other hand button is located in the center. Now I set VStack alignment to leading. I'm not familiar with the Swift UI quite well, so the first idea is to use several vertical stacks with different alignments, but I assume it can be done easier. If I add alignment guide to the button, it doesn't work either.

3
swiftswiftui
Button() .frame(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.height /2, alignment: .center) – Ernist Isabekov

3 Answers

5
votes

I would use included HStack as in demo below

enter image description here

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)
}
2
votes

You could use GeometryReader for this:

A container view that defines its content as a function of its own size and coordinate space.

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)
}
0
votes

One more way is to use a VStack with center alignment and maxWidth.

VStack(alignment: .leading) {

        Text("Title")
            .bold()
            .font(Font.custom("Helvetica Neue", size: 36.0))

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


    }.padding(20)