在 SwiftUI 的特定页面上隐藏标签栏
Hiding tab bar on a specific page in SwiftUI
我在我的应用程序中使用相机。该应用程序允许您借助 SwiftUI 中的 TabView
导航到此相机视图。但是,问题是,当我在相机视图中时,我想隐藏 TabView
。到目前为止,我一直在努力寻找解决方案,但我似乎找不到任何解决方案。
这里是screenshot of the code and the view with the tabview
注意: 如果预览,屏幕截图包含图像。当我在真实设备上 运行 时,相机工作正常。问题是我需要在进入相机视图后隐藏标签栏。
这里是我使用的代码示例:
import SwiftUI
struct AppView: View {
var body: some View {
TabView{
Home()
.tabItem {
// Add icon
Text("Home")
}
MomentsCam()
.tabItem {
// Add icon
Text("Camera")
}.navigationBarHidden(true)
Moments()
.tabItem{
//Add icon
Text("Moments")
}
}
}
}
我根据您的情况用 TabView 更新了 。同样的想法:您正在使用 ZStack
和 @State var selection
。这个想法是使用 TabView
的 .opacity
和 YourCameraView
(在我的示例中只是 Image(systemName: "plus.circle")
):
struct TabViewModel: View {
@State var selection: Int = 0
var body: some View {
ZStack {
GeometryReader { geometry in
TabView(selection: self.$selection) {
Text("list")
.tabItem {
Image(systemName: "list.bullet.below.rectangle")
}.tag(0)
Text("plus")
.tabItem {
Image(systemName: "camera")
}.tag(1)
Text("more categories!")
.tabItem {
Image(systemName: "square.grid.2x2")
}.tag(2)
}
.opacity(self.selection == 1 ? 0.01 : 1)
Image(systemName: "plus.circle")
.resizable()
.frame(width: 60, height: 60)
.shadow(color: .gray, radius: 2, x: 0, y: 5)
.offset(x: geometry.size.width / 2 - 30, y: geometry.size.height - 80)
.onTapGesture {
self.selection = 0
}
.opacity(self.selection == 1 ? 1 : 0)
}
}
}
}
当您点击相机选项卡时,项目 TabView
变得不可见
您可以根据需要尝试以下代码。
struct MomentsCam: View {
var body: some View {
Text("Cam")
}
}
struct Moments: View {
var body: some View {
Text("Moments Cam")
}
}
struct AppView: View {
@State var showCamera = false
var body: some View {
GeometryReader{ p in
ZStack{
TabView{
Home()
.tabItem {
// Add icon
Text("Home")
}
Text("holder")
.tabItem {
// Add icon
Text("Camera")
}.navigationBarHidden(true).onAppear{
self.showCamera = true
print(p.size)
}
Moments()
.tabItem{
//Add icon
Text("Moments")
}
}
if self.showCamera{
MomentsCam().frame(width: p.size.width, height: p.size.height).background(Color.white)
}
}
}
}
}
我在我的应用程序中使用相机。该应用程序允许您借助 SwiftUI 中的 TabView
导航到此相机视图。但是,问题是,当我在相机视图中时,我想隐藏 TabView
。到目前为止,我一直在努力寻找解决方案,但我似乎找不到任何解决方案。
这里是screenshot of the code and the view with the tabview
注意: 如果预览,屏幕截图包含图像。当我在真实设备上 运行 时,相机工作正常。问题是我需要在进入相机视图后隐藏标签栏。
这里是我使用的代码示例:
import SwiftUI
struct AppView: View {
var body: some View {
TabView{
Home()
.tabItem {
// Add icon
Text("Home")
}
MomentsCam()
.tabItem {
// Add icon
Text("Camera")
}.navigationBarHidden(true)
Moments()
.tabItem{
//Add icon
Text("Moments")
}
}
}
}
我根据您的情况用 TabView 更新了 ZStack
和 @State var selection
。这个想法是使用 TabView
的 .opacity
和 YourCameraView
(在我的示例中只是 Image(systemName: "plus.circle")
):
struct TabViewModel: View {
@State var selection: Int = 0
var body: some View {
ZStack {
GeometryReader { geometry in
TabView(selection: self.$selection) {
Text("list")
.tabItem {
Image(systemName: "list.bullet.below.rectangle")
}.tag(0)
Text("plus")
.tabItem {
Image(systemName: "camera")
}.tag(1)
Text("more categories!")
.tabItem {
Image(systemName: "square.grid.2x2")
}.tag(2)
}
.opacity(self.selection == 1 ? 0.01 : 1)
Image(systemName: "plus.circle")
.resizable()
.frame(width: 60, height: 60)
.shadow(color: .gray, radius: 2, x: 0, y: 5)
.offset(x: geometry.size.width / 2 - 30, y: geometry.size.height - 80)
.onTapGesture {
self.selection = 0
}
.opacity(self.selection == 1 ? 1 : 0)
}
}
}
}
当您点击相机选项卡时,项目 TabView
变得不可见
您可以根据需要尝试以下代码。
struct MomentsCam: View {
var body: some View {
Text("Cam")
}
}
struct Moments: View {
var body: some View {
Text("Moments Cam")
}
}
struct AppView: View {
@State var showCamera = false
var body: some View {
GeometryReader{ p in
ZStack{
TabView{
Home()
.tabItem {
// Add icon
Text("Home")
}
Text("holder")
.tabItem {
// Add icon
Text("Camera")
}.navigationBarHidden(true).onAppear{
self.showCamera = true
print(p.size)
}
Moments()
.tabItem{
//Add icon
Text("Moments")
}
}
if self.showCamera{
MomentsCam().frame(width: p.size.width, height: p.size.height).background(Color.white)
}
}
}
}
}