I’ve two views with principally similar constructions, 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 comfortable with the textual content not aligning, I’d wish 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 wish to modify the button place in Welcom step view somewhat 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 sensible bank card supervisor. To get the most effective expertise, we would wish 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 personal 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 essential 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()
}
}