ios – Align button place in Swift UI

Each your views are constructed in the identical means:

VStack(spacing: 40) {
    Spacer()
    VStack(spacing: 20) {
        // picture and textual content right here
    }
    Spacer()
    VStack(spacing: 16) {
        // button content material right here
    }
    Spacer(minLength: 50)
}
.padding()

The presence of the Spacer goes to imply, the view will at all times use all the peak out there. However the extra house might be divided between the Spacer. Setting minLength on the underside Spacer doesn’t provide you with a lot management over how a lot house it consumes.

One other complication is that the button panel in NotificationPermissionStepView features a second button for skipping the step. If I perceive accurately, you need the first button of this view to be aligned with the (solely) button in WelcomeStepView.

One solution to repair the alignment is to take away the underside Spacer and apply an acceptable most top to the decrease VStack utilizing .body with alignment: .high. This manner,

• the opposite Spacer will be sure that the button panel is pushed to the underside of the display
• the .body modifier will be sure that the buttons are aligned throughout screens.

VStack(spacing: 16) {
    // button content material right here
}
.padding(.horizontal, 40)
.body(maxHeight: 100, alignment: .high) // 👈 added

// Spacer(minLength: 50) // 👈 eliminated

These adjustments have to be utilized to each views in the identical means.

Right here is the way it works when utilizing a TabView as guardian for the 2 views:

TabView {
    WelcomeStepView {}
    NotificationPermissionStepView {} onSkip: {}
}
.tabViewStyle(.web page)