SwiftUI 奇怪的界面元素排列

Question

我是一名学习 SwiftUI 编程的爱好者，找不到我哪里出错了。我在 NavigationBar 中添加了一个按钮和标题，该栏非常宽。另外，我不明白为什么 ScrollView 中的照片和图表之间有这么大的 space。关于 NavigationBar，我认为当我添加 Title 和一个额外的按钮时出现了问题。我删除了它们，但是当我向下移动屏幕时仍然会出现一个宽导航栏。另外，如果我没有添加 Spacer，我不明白为什么照片和图表之间会有这么大的 space。下面是当前应用 UI 的屏幕和源代码。

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)
                
            }
        }
    }
}

Answer 1

删除 body 中的 NavigationView，因为它已经在 NavigationView 中，您不需要再往下添加新的。

var body: some View {
    ScrollView(.vertical, showsIndicators: false) {