用户滚动时隐藏导航栏
Posted
技术标签:
【中文标题】用户滚动时隐藏导航栏【英文标题】：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()
【问题讨论】：
【参考方案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")
【讨论】：
以上是关于用户滚动时隐藏导航栏的主要内容，如果未能解决你的问题，请参考以下文章