I have two views with basically same structures, including the same padding and spacing. The only difference is that the first “Welcome step” view uses a larger icon size of 240, while the other views use an icon size of 80. While I’m ok with the text not aligning, I’d like to align the button positions across these views. I’ve attempted adjusting padding and using spacer(), but neither approach has worked. Is there a solution to this problem?
Ideally, I would like to modify the button position in Welcom step view rather than other views.
Any help is appreciated.
struct WelcomeStepView: View {
let onNext: () -> Void
var body: some View {
VStack(spacing: 40) {
Spacer()
// App Icon/Logo
VStack(spacing: 20) {
Image("kacardicon")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 240)
Text("Welcome to KaCard")
.font(.title)
.fontWeight(.bold)
.multilineTextAlignment(.center)
Text("This is your smart credit card manager. To get the best experience, we'd like to set up a few features.")
.font(.body)
.foregroundColor(.secondary)
.multilineTextAlignment(.center)
.padding(.horizontal)
}
Spacer()
VStack(spacing: 16) {
Button(action: onNext) {
Text("Get Started")
.font(.headline)
.foregroundColor(.white)
.frame(maxWidth: .infinity)
.padding()
.background(Color.blue)
.cornerRadius(12)
}
}
.padding(.horizontal, 40)
Spacer(minLength: 50)
}
.padding()
}
}
struct NotificationPermissionStepView: View {
let onNext: () async -> Void
let onSkip: () -> Void
@State private var isLoading = false
var body: some View {
VStack(spacing: 40) {
Spacer()
VStack(spacing: 20) {
Image(systemName: "bell.circle.fill")
.font(.system(size: 80))
.foregroundColor(.yellow)
Text("Stay on Top of Your Bills")
.font(.title)
.fontWeight(.bold)
.multilineTextAlignment(.center)
Text("We'll send you timely reminders for bill payments, annual fees, and signup bonus deadlines so you never miss an important date.")
.font(.body)
.foregroundColor(.secondary)
.multilineTextAlignment(.center)
.padding(.horizontal)
}
Spacer()
VStack(spacing: 16) {
Button(action: {
isLoading = true
Task {
await onNext()
isLoading = false
}
}) {
HStack {
if isLoading {
ProgressView()
.scaleEffect(0.8)
.progressViewStyle(CircularProgressViewStyle(tint: .white))
}
Text(isLoading ? "Requesting..." : "Enable Notifications")
.font(.headline)
}
.foregroundColor(.white)
.frame(maxWidth: .infinity)
.padding()
.background(Color.yellow)
.cornerRadius(12)
}
.disabled(isLoading)
Button("Skip for Now", action: onSkip)
.font(.subheadline)
.foregroundColor(.secondary)
}
.padding(.horizontal, 40)
Spacer(minLength: 50)
}
.padding()
}
}