ios – Align button place in Swift UI


I’ve two views with principally identical buildings, together with the identical padding and spacing. The one distinction is that the primary “Welcome step” view makes use of a bigger icon measurement of 240, whereas the opposite views use an icon measurement of 80. Whereas I am pleased with the textual content not aligning, I’d prefer to align the button positions throughout these views. I’ve tried adjusting padding and utilizing spacer(), however neither method has labored. Is there an answer to this drawback?

Ideally, I want to modify the button place in Welcom step view slightly than different views.

Any assistance is appreciated.

struct WelcomeStepView: View {
    let onNext: () -> Void
    
    var physique: some View {
        VStack(spacing: 40) {
            Spacer()
            // App Icon/Brand
            VStack(spacing: 20) {
                Picture("kacardicon")
                    .resizable()
                    .aspectRatio(contentMode: .match)
                    .body(peak: 240)
                
                Textual content("Welcome to KaCard")
                    .font(.title)
                    .fontWeight(.daring)
                    .multilineTextAlignment(.middle)

                Textual content("That is your good bank card supervisor. To get the very best expertise, we would prefer to arrange a couple of options.")
                    .font(.physique)
                    .foregroundColor(.secondary)
                    .multilineTextAlignment(.middle)
                    .padding(.horizontal)
            }

            Spacer()

            VStack(spacing: 16) {
                Button(motion: onNext) {
                    Textual content("Get Began")
                        .font(.headline)
                        .foregroundColor(.white)
                        .body(maxWidth: .infinity)
                        .padding()
                        .background(Colour.blue)
                        .cornerRadius(12)
                }
            }
            .padding(.horizontal, 40)
            
            Spacer(minLength: 50)
        }
        .padding()
    }
}
struct NotificationPermissionStepView: View {
    let onNext: () async -> Void
    let onSkip: () -> Void
    @State non-public var isLoading = false
    
    var physique: some View {
        VStack(spacing: 40) {
            Spacer()
            
            VStack(spacing: 20) {
                Picture(systemName: "bell.circle.fill")
                    .font(.system(measurement: 80))
                    .foregroundColor(.yellow)
                
                Textual content("Keep on High of Your Payments")
                    .font(.title)
                    .fontWeight(.daring)
                    .multilineTextAlignment(.middle)
                
                Textual content("We'll ship you well timed reminders for invoice funds, annual charges, and signup bonus deadlines so that you by no means miss an vital date.")
                    .font(.physique)
                    .foregroundColor(.secondary)
                    .multilineTextAlignment(.middle)
                    .padding(.horizontal)
            }
            
            Spacer()
            
            VStack(spacing: 16) {
                Button(motion: {
                    isLoading = true
                    Process {
                        await onNext()
                        isLoading = false
                    }
                }) {
                    HStack {
                        if isLoading {
                            ProgressView()
                                .scaleEffect(0.8)
                                .progressViewStyle(CircularProgressViewStyle(tint: .white))
                        }
                        Textual content(isLoading ? "Requesting..." : "Allow Notifications")
                            .font(.headline)
                    }
                    .foregroundColor(.white)
                    .body(maxWidth: .infinity)
                    .padding()
                    .background(Colour.yellow)
                    .cornerRadius(12)
                }
                .disabled(isLoading)
                
                Button("Skip for Now", motion: onSkip)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
            .padding(.horizontal, 40)
            
            Spacer(minLength: 50)
        }
        .padding()
    }
}

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles