SwiftUI strange arrangement of interface elements I am a hobbyist learning SwiftUI programming and cannot find where I made a mistake. I added a button and title to the NavigationBar and the bar is awfully wide. Also, I don't understand why there is such a huge space between the photo and the charts that are in ScrollView. Regarding the NavigationBar, I thought the problem arose when I added Title and an extra button. I removed them, but still a wide navigation bar appears when I move the screen down. Also, I don't understand why there is such a large space between the photo and the charts, if I haven't added any Spacer. Below is screen of current app UI and source code.

struct ScanWithPhotoFromLibrary: View {
    
    @State var cupWidth: String = ""
    @State var cupHeight: String = ""
    @State var stemLength: String = ""
    @State var leafWidth: String = ""
    @State var leafLength: String = ""
    
    @State private var showSheet: Bool = false
    @State private var showImagePicker: Bool = false
    @State private var sourceType: UIImagePickerController.SourceType = .camera
    
    @State private var userImage: UIImage?
    @State private var flowerName: String = ""
    @State private var timeRecognition: Double = 0.0
    @State private var classificationInProcent: Array<Any> = []
    @EnvironmentObject var env: ImagePickerCoordinator
    @ObservedObject var getOldValueFromDb = getOldValuesFromDb()
    
    var columns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2)
    
    var body: some View {


NavigationView{

ScrollView(.vertical, showsIndicators: false) {

ZStack(alignment: .top) {

Spacer(minLength: 0)

VStack(){
Image(uiImage: self.userImage ?? UIImage(named: "flower_logo")!)
.resizable()
.aspectRatio( contentMode:.fit)
.edgesIgnoringSafeArea(.top)
.frame(width: 375, height: 375)

HStack{

Text("Statistics")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)

Spacer(minLength: 0)
}
.padding()

// stats Grid....

LazyVGrid(columns: columns,spacing: 30){

ForEach(stats_Data){stat in

VStack(spacing: 32){

HStack{

Text(stat.title)
.font(.system(size: 22))
.fontWeight(.bold)
.foregroundColor(.white)

Spacer(minLength: 0)
}

// Ring...

ZStack{

Circle()
.trim(from: 0, to: 1)
.stroke(stat.color.opacity(0.05), lineWidth: 10)
.frame(width: (UIScreen.main.bounds.width - 150) / 2, height: (UIScreen.main.bounds.width - 150) / 2)

Circle()
.trim(from: 0, to: (stat.currentData / stat.goal))
.stroke(stat.color, style: StrokeStyle(lineWidth: 10, lineCap: .round))
.frame(width: (UIScreen.main.bounds.width - 150) / 2, height: (UIScreen.main.bounds.width - 150) / 2)

Text(getPercent(current: stat.currentData, Goal: stat.goal) + " %")
.font(.system(size: 22))
.fontWeight(.bold)
.foregroundColor(stat.color)
.rotationEffect(.init(degrees: 90))
}
.rotationEffect(.init(degrees: -90))

Text(getDec(val: stat.currentData))
.font(.system(size: 22))
.foregroundColor(.white)
.fontWeight(.bold)
}
.padding()
.background(Color.white.opacity(0.06))
.cornerRadius(15)
.shadow(color: Color.white.opacity(0.2), radius: 10, x: 0, y: 0)
}
}




}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .top)

.navigationBarTitle(Text(String(classificationInProcent.count)).foregroundColor(.blue), displayMode: .inline)
.navigationBarItems(trailing:
HStack {
Button("Library") {
self.showImagePicker = true
self.sourceType = .photoLibrary
print("Library tapped!")
}
}
)

}
.navigationBarHidden(false)

}

.sheet(isPresented: $showImagePicker) {
ImagePicker(image: self.$userImage, isShown: self.$showImagePicker, flowerName: self.$flowerName, executionTime: self.$timeRecognition, classificationInProcent: self.$classificationInProcent, sourceType: self.sourceType)

}
}
    }
}


Remove the NavigationView within the body since it's already inside a NavigationView and you don't need to add a new one further down the line.
var body: some View {
    ScrollView(.vertical, showsIndicators: false) {