How to make sure that an element does not exceed of screen in swiftUI? - swift

Question

I have a probleme that I can not manage in swiftUI : I have some elements in a VStack, a view goes beyond the screen, is normal, but my menu exceed also, it's normal behavior but not the desired result. I don't know how to bypass this result.
The component that exceed:
The component menu that must not exceed:
Code of the contentView.swift
import SwiftUI
struct ContentView : View {
var body: some View {
ZStack {
Rectangle()
.foregroundColor(.clear)
.background(LinearGradient(gradient: Gradient(colors: [Color(red: 189/255, green: 195/255, blue: 199/255, opacity: 1.0), .white]), startPoint: .topTrailing, endPoint: .bottomLeading),
cornerRadius: 0)
.edgesIgnoringSafeArea(.all)
VStack() {
ScreenTitle()
Spacer()
Sonar()
Spacer()
NavBar()
}
}
}
}
Code of sonar view:
import SwiftUI
struct Sonar : View {
#State private var sonarAtived: Bool = false
private var animationSonarCircleOne: Animation {
Animation.basic(duration: 0.2, curve: .easeInOut)
.delay(0)
}
private var animationSonarCircleTwo: Animation {
Animation.basic(duration: 0.2, curve: .easeInOut)
.delay(0.1)
}
private var animationSonarCircleThree: Animation {
Animation.basic(duration: 0.2, curve: .easeInOut)
.delay(0.25)
}
private var animationButtonSublay: Animation {
Animation.basic(duration: 0.7, curve: .easeInOut)
.repeatForever(autoreverses: true)
}
var body: some View {
HStack(spacing: 20) {
ZStack {
// Button sublay
Circle()
.animation(animationButtonSublay)
.frame(width: 130, height: 130)
.padding(10)
.foregroundColor(Color.init(red: 231/255, green: 76/255, blue: 60/255, opacity: 0.4))
.overlay(Circle().stroke(Color.init(red: 231/255, green: 76/255, blue: 60/255, opacity: self.sonarAtived ? 0.5 : 0), lineWidth: self.sonarAtived ? 30 : 0))
// Button
Button(action: {
self.sonarAtived.toggle()
}) {
Text("Enregistrer ma position")
.color(.white)
.lineLimit(nil)
.multilineTextAlignment(.center)
.font(.system(size: 22))
}
.frame(width: 130, height: 130)
.padding(10)
.background(Color.init(red: 231/255, green: 76/255, blue: 60/255, opacity: 1.0))
.overlay(Circle().stroke(Color.init(red: 192/255, green: 57/255, blue: 43/255, opacity: 1.0), lineWidth: 3))
.clipShape(Circle())
// Circles
Circle()
.animation(animationSonarCircleOne)
.frame(width: 250, height: 250, alignment: .center)
.overlay(Circle().stroke(Color.init(red: 52/255, green: 73/255, blue: 94/255, opacity: self.sonarAtived ? 0.18 : 0.0), lineWidth: 1))
.foregroundColor(Color.clear)
Circle()
.animation(animationSonarCircleTwo)
.frame(width: 400, height: 400, alignment: .center)
.overlay(Circle().stroke(Color.init(red: 52/255, green: 73/255, blue: 94/255, opacity: self.sonarAtived ? 0.15 : 0.0), lineWidth: 1))
.foregroundColor(Color.clear)
Circle()
.animation(animationSonarCircleThree)
.frame(width: 550, height: 600, alignment: .center)
.overlay(Circle().stroke(Color.init(red: 52/255, green: 73/255, blue: 94/255, opacity: self.sonarAtived ? 0.10 : 0.0), lineWidth: 1))
.foregroundColor(Color.clear)
}
}
}
}
Code of menu view, unwanted exceed:
import SwiftUI
struct NavBar : View {
var body: some View {
VStack {
Image("navigation_border")
.resizable()
.aspectRatio(contentMode: .fill)
HStack {
Spacer()
// Compass button
Button(action: {
// Code here
}) {
Image("ic_compass")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: CGFloat(40), height: CGFloat(40), alignment: .center)
Text("Boussole")
.color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 0.4))
.font(.system(size: 14))
}.frame(height: CGFloat(50), alignment: .bottomLeading)
Spacer()
// Travel button
Button(action: {
// Code here
}) {
Image("ic_travel")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: CGFloat(40), height: CGFloat(40), alignment: .center)
Text("Parcours")
.color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 0.4))
.font(.system(size: 14))
}.frame(height: CGFloat(50), alignment: .bottomLeading)
Spacer()
// Settings button
PresentationLink(destination: Settings()) {
Image("ic_settings")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 35, height: 35, alignment: .center)
Text("Paramètres")
.color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 0.4))
.font(.system(size: 14))
}.frame(height: 50, alignment: .bottomLeading)
Spacer()
}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 70, maxHeight: 70, alignment: Alignment.center)
}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 90, maxHeight: 90, alignment: Alignment.center)
}
}