SwiftUI 隐藏 NavigationView 导航栏

SwiftUI 对 NavigationView 导航栏的一些操作

简介

原本简单的一个需求,但是相关的文档较少,所以还是记录一下的好

需求描述

在 SwiftUI 开发 IOS 应用时,官方建议使用 NavigationView 来跳转页面,使用环境例如登录页弹出注册与修改密码二级菜单,登陆页需要隐藏导航栏,注册与修改密码菜单则需要显示导航栏显示标题并且可以返回登录页。

遇到问题

直接使用 .navigationBarHidden(true) 可以使标题隐藏,但是二级菜单中的导航栏同步也会被隐藏,额外增加 .onAppear 与 .onDisappear 控制变量使导航栏在什么时候显示。

修改前截图示例

修改前代码片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
struct LoginView: View {
var body: some View {
NavigationView{
VStack(){

……

HStack(){
NavigationLink(
destination: RegisterView(),
label: {
Text("注册用户")
})
Spacer()
NavigationLink(
destination: RetrievePasswordView(),
label: {
Text("找回密码")
})
}
.padding(EdgeInsets(top: 30, leading: 40, bottom: 0, trailing: 40))
}
.navigationBarTitle(Text("登录"))
}
}
}

修改后截图示例

修改后代码片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
struct LoginView: View {

@State var isNavigationBarHidden: Bool = true

var body: some View {
NavigationView{
VStack(){

……

HStack(){
NavigationLink(
destination: RegisterView(),
label: {
Text("注册用户")
})
Spacer()
NavigationLink(
destination: RetrievePasswordView(),
label: {
Text("找回密码")
})
}
.padding(EdgeInsets(top: 30, leading: 40, bottom: 0, trailing: 40))
}
.navigationBarTitle(Text("登录"))
.navigationBarHidden(self.isNavigationBarHidden)
.onAppear {
self.isNavigationBarHidden = true
}
.onDisappear {
self.isNavigationBarHidden = false
}
}
}
}