用户滚动时隐藏导航栏答案

【问题标题】：Hide navigation bar when user scrolls用户滚动时隐藏导航栏
【发布时间】：2021-09-10 10:03:24
【问题描述】：

当我在视图中滚动时，导航栏不会消失，我的屏幕看起来像 this。我想在用户滚动时隐藏导航栏，但我在互联网上找不到有用的东西，而且我是 ios 开发和 swiftUI 的初学者。有人可以帮我解决这个问题吗？

谢谢！ :-)

我的代码：

//
//  AddGoalView.swift
//  iGrow Goals
//
//  Created by George Sepetadelis on 6/9/21.
//

import SwiftUI

struct AddGoalView: View {
    
    @State var title = ""
    @State var description = ""
    @State var numTarget = ""
    var units = ["Other", "Kg", "$$", "Km", "Hours", "Days", "Weeks", "%"]
    var categories = ["Career", "Finance", "Personal", "Health & Fitness", "Spirituality", "Relationships", "Projects", "Fun & Recreation"]
    var members = [""]
    @State var numUnitIndex = 0
    @State var categoryIndex = 0
    @State var numUnit = "Other"
    @State var startDate = Date()
    @State var endDate = Date()
    @State var category = "Other"
    @State var startDateString = "none"
    @State var endDateString = "none"
    @State var memberEmail = ""
    @State var membersText = "No members"
    @State var showPremiumDialog = false
    @State var showPremiumScreen = false
    @State var showStepTipsScreen = false
    @State var step1 = ""
    @State var step2 = ""
    
    
    var body: some View {
        
        NavigationView {
            
            ScrollView {
                
                VStack {
                    
                    
                    HStack {
                        Text("Goal Name: ").bold().font(.system(size: 20))
                        TextField("Enter Goal Name",text: $title).font(.system(size: 20))
                    }
                    .padding(.leading, 15)
                    .padding(.top, 30)
                    
                    
                    HStack {
                        Text("SMART Goal: ").bold().font(.system(size: 20))
                        TextField("Enter SMART Goal",text: $description).font(.system(size: 20))
                    }
                    .padding(.leading, 15)
                    .padding(.top, 10)
                    
                    
                    HStack {
                        Text("Numerical Target: ").bold().font(.system(size: 20))
                        TextField("Enter Numerical Target",text: $numTarget).font(.system(size: 18))
                    }
                    .padding(.leading, 15)
                    .padding(.top, 10)
                    
                    HStack {
                        
                        Picker(selection: $numUnitIndex, label: Text("Numerical Unit: \(numUnit)")) {
                            ForEach(0 ..< units.count) {
                                Text(self.units[$0]).tag($0).foregroundColor(.blue)
                            }
                        }.onChange(of: numUnitIndex, perform: { newValue in
                            numUnit = units[newValue]
                        })
                        .pickerStyle(MenuPickerStyle())
                        .padding(.top, 10)
                        .font(.system(size: 20))
                        
                        Spacer()
                        
                    }.padding(.leading, 15)
                    
                    HStack {
                        DatePicker(
                            "Start Date",
                            selection: $startDate,
                            displayedComponents: [.date]
                        )
                        
                    }.padding(.leading, 15)
                    .padding(.trailing, 15)
                    .padding(.top, 10)
                    .font(.system(size: 20))
                    .onChange(of: startDate) { newDate in
                        
                        let calendar = Calendar.current
                        let month = calendar.component(.month, from: newDate)
                        let day = calendar.component(.day, from: newDate)
                        let year = calendar.component(.year, from: newDate)
                        
                        startDateString = "\(day)/\(month)/\(year)"
                        
                    }
                    
                    HStack {
                        DatePicker(
                            "End Date",
                            selection: $endDate,
                            displayedComponents: [.date]
                        )
                        
                    }.padding(.leading, 15)
                    .padding(.trailing, 15)
                    .padding(.top, 10)
                    .font(.system(size: 20))
                    .onChange(of: endDate) { newDate in
                        
                        let calendar = Calendar.current
                        let month = calendar.component(.month, from: newDate)
                        let day = calendar.component(.day, from: newDate)
                        let year = calendar.component(.year, from: newDate)
                        
                        endDateString = "\(day)/\(month)/\(year)"
                        
                    }
                    
                    
                    HStack {
                        
                        Picker(selection: $categoryIndex, label: Text("Category: \(category)")) {
                            ForEach(0 ..< categories.count) {
                                Text(self.categories[$0]).tag($0).foregroundColor(.blue)
                            }
                        }.onChange(of: categoryIndex, perform: { newValue in
                            category = categories[newValue]
                        })
                        .pickerStyle(MenuPickerStyle())
                        .padding(.top, 10)
                        .font(.system(size: 20))
                        
                        Spacer()
                        
                    }.padding(.leading, 15)
                    
                    
                    HStack {
                        Text("Add Member")
                            .bold()
                            .font(.system(size: 30))
                        Spacer()
                    }.padding(.leading, 15)
                    .padding(.top, 27)
                    
                    HStack {
                        Text("Member email: ").bold()
                        TextField("Enter Member Email", text: $memberEmail).font(.system(size: 20))
                    }.padding(.top, 10)
                    .padding(.leading, 15)
                    .font(.system(size: 20))
                    
                    Group {
                        
                        Text("Add member")
                            .font(.system(size: 18))
                            .foregroundColor(.white)
                            .padding()
                            .frame(width: 220, height: 50)
                            .background(Color.blue)
                            .cornerRadius(40)
                            .padding(.top, 20)
                            .onTapGesture {
                                // add memeber after checking for premium plan
                            }.alert(isPresented:$showPremiumDialog) {
                                Alert(
                                    title: Text("You cannot share goals with other users without the premium plan"),
                                    primaryButton: .destructive(Text("Buy Premium")) {
                                        
                                        showPremiumScreen = true
                                    },
                                    secondaryButton: .cancel()
                                )
                            }
                        
                        HStack {
                            Spacer()
                            Text(membersText)
                                .bold()
                                .foregroundColor(Color.gray)
                                .padding(.top, 4)
                            Spacer()
                        }
                        
                        
                        HStack {
                            
                            Text("Add Steps").bold().font(.system(size: 30))
                            
                            Spacer()
                            
                            Button(action: {
                                showStepTipsScreen = true
                            }, label: {
                                Image("help_icon")
                                    .padding(.trailing, 15)
                            }).sheet(isPresented: $showStepTipsScreen, content: {
                                StepsTipsView()
                            })
                            
                            
                            
                        }.padding(.top, 10)
                        .padding(.leading, 15)
                        
                        HStack {
                            Text("Step 1: ").bold()
                            TextField("Enter Step Name", text: $step1)
                        }.padding(.leading, 15)
                        .padding(.top, 10)
                        .font(.system(size: 20))
                        
                        HStack {
                            Text("Step 2: ").bold()
                            TextField("Enter Step Name", text: $step2)
                        }.padding(.leading, 15)
                        .padding(.top, 10)
                        .font(.system(size: 20))
                        
                        Button(action: {}, label: {
                            Text("Create")
                                .bold()
                                .font(.system(size: 25))
                        })
                        .font(.system(size: 18))
                        .foregroundColor(.white)
                        .padding()
                        .frame(width: 220, height: 50)
                        .background(Color.blue)
                        .cornerRadius(40)
                        .padding(.top, 30)
                        
                        NavigationLink("", destination: PurchasePremiumView(), isActive: $showPremiumScreen)

                        
                    }
                    
                    
                }.navigationBarHidden(true)
                
            }
            
        }.navigationTitle("Add New Goal")
        
    }
}

struct AddGoalView_Previews: PreviewProvider {
    static var previews: some View {
        AddGoalView()
    }
}

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

欢迎来到 SwiftUI 社区。所以我运行了代码，我发现了一些问题。我看到了一些错误并自己重新创建了它们。

首先，我猜您使用的是ContentView，如下代码所述

struct ContentView: View {

    var body: some View {
        NavigationView {
            AddGoalView()
        }
    }
}

通过这样做，如果我们转到您的代码，然后向下滚动到 .navigationTitle("Add New Goal") 部分。您没有将标题设置为AddGoalView 中的NavigationView，而是设置为ContentView 中的NavigationView。要解决此问题，请将您的 .navigationTitle("Add New Goal") 移动到 ScrollView，如下所示。

struct AddGoalView: View {
.
.
.
    NavigationView {
        ScrollView {
        .
        .
        .
        }
        .navigationTitle("Add New Goal") //<-- Here
}

此后，去掉.navigationBarHidden(true)这一行

但是，这将解决您的滚动问题，但您会注意到导航栏占用的垂直空间比您以前看到的要多。这是因为您将 2 个NavigationViews 堆叠在一起（ContentView 中的 1 个，AddGoalView 中的另一个）。示例见下图

要解决此问题，您可以完全删除 AddGoalView 视图中的 NavigationView。这应该可以解决您的问题输出如下所示。

固定代码可以在这个pastebin link找到

【讨论】：

您能否显示一些代码以了解您的具体操作？
是的，我想我重现了您遇到的问题。我已经更新了代码，所以你可以理解
我已对您的答案进行了更改并将代码添加到 Pastebin 文件中，以便您在有任何问题时参考代码
谢谢，正在工作。但由于某种原因，我看不到后退按钮
那是因为，在我发送的代码中，我没有从 ContentView 打开 AddGoalView。您必须进行一些调整，以便从 ContentView 导航

【解决方案2】：

为了解决你的问题，我建议你去掉这条线，就像之前的评论员说的：

.navigationBarHidden(true)

此外，我注意到您在 NavigationView 的实现之外使用了 .navigationTitle("Add New Goal") 修饰符。像这里一样在花括号内替换它

NavigationView{ 
    ...some code ... 
       .navigationTitle("Add New Goal")
}

【讨论】：