ios 在SwiftUI中,如果NavigationView中有TabView,导航工具栏将继续堆叠

bxfogqkk  于 2023-05-19  发布在  iOS
关注(0)|答案(1)|浏览(169)

问题

我希望现有的工具栏消失时,下一个视图是推动。
但是,它的行为与我预期的不同。
当下一个视图被推入时,它将与现有工具栏一起进入。
为什么会这样?

p.s.我们的应用程序要求标签栏总是暴露的。所以我不能在tabview中使用navigationview。

我的代码

自定义导航

import SwiftUI
import Foundation

public enum GPToolbarItem {
  case logo(_ didTap: (() -> Void)? = nil)
  case magnifyingGlass(_ didTap: (() -> Void)? = nil)
  case chevronLeft(_ didTap: (() -> Void)? = nil)
  case heart(_ didTap: (() -> Void)? = nil)
  case text(_ didTap: (() -> Void)? = nil)
}

extension GPToolbarItem: Identifiable {
  public var id: UUID { .init() }
}

public extension View {
  func gpNavigationTitle(_ title: Text) -> some View {
    return modifier(GPNavigationTitleModifier(title: title))
  }

  func gpToolbarItem(leftItems: [GPToolbarItem], rightItems: [GPToolbarItem]) -> some View {
    return modifier(GPToolbarItemModifier(leftItems: leftItems, rightItems: rightItems))
  }
}
struct GPToolbarItemModifier: ViewModifier {
  private let leftItems: [GPToolbarItem]
  private let rightItems: [GPToolbarItem]
  
  init(leftItems: [GPToolbarItem], rightItems: [GPToolbarItem]) {
    self.leftItems = leftItems
    self.rightItems = rightItems
  }
  
  func body(content: Content) -> some View {
    content
      .navigationBarBackButtonHidden(true)
      .toolbar {
        ToolbarItemGroup(placement: .navigationBarLeading) {
          ItemBuilder(items: self.leftItems)
        }
        ToolbarItemGroup(placement: .navigationBarTrailing) {
          ItemBuilder(items: self.rightItems)
        }
      }
  }
  
  @ViewBuilder
  private func ItemBuilder(items: [GPToolbarItem]) -> some View {
    ForEach(items) {
      switch $0 {
      case let .logo(tapGesture):
        Button("logo") {
          tapGesture?()
        }
      case let .magnifyingGlass(tapGesture):
        Button("magnifyingGlass") {
          tapGesture?()
        }
      case let .chevronLeft(tapGesture):
        Button("chevronLeft") {
          tapGesture?()
        }
      case let .heart(tapGesture):
        Button("heart") {
          tapGesture?()
        }
      case let .text(tapGesture):
        Button("text") {
          tapGesture?()
        }
      }
    }
  }
}
struct GPNavigationTitleModifier: ViewModifier {
  private let title: Text
  
  init(title: Text) { self.title = title }
  
  func body(content: Content) -> some View {
    content
      .navigationBarBackButtonHidden(true)
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle(self.title)
  }
}

用法

import SwiftUI

@main
struct NavigationAndTabApp: App {
    var body: some Scene {
        WindowGroup {
          NavigationView {
            TabView {
              GPNavigationPreview()
                .tabItem {
                  Image(systemName: "house")
                  Text("home")
                }
              SwiftUIView()
                .tabItem {
                  Image(systemName: "house")
                  Text("home")
                }
            }
          }
        }
    }
}

struct GPNavigationPreview: View {
    var body: some View {
      NavigationView {
        NavigationLink(destination: GPNavigationPreview2()) {
          Text("GPNavigationPreview")
        }
      }
      .gpNavigationTitle(.init("GPNavigationPreview"))
      .gpToolbarItem(leftItems: [.logo()], rightItems: [.magnifyingGlass()])
    }
}

struct GPNavigationPreview2: View {
    var body: some View {
      NavigationLink(destination: GPNavigationPreview3()) {
        Text("GPNavigationPreview2")
      }
      .gpToolbarItem(leftItems: [.chevronLeft()], rightItems: [.heart()])
    }
}

struct GPNavigationPreview3: View {
    var body: some View {
      Text("GPNavigationPreview3")
    }
}

提前感谢您的回答。

b1payxdu

b1payxdu1#

这与TabView无关。
第一个视图中的NavigationToolbar项目在第二个视图中没有消失的原因是因为您在NavigationView中声明了.toolbar
移动到声明.toolbar的位置应该可以修复它,如下所示

struct GPNavigationPreview: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: GPNavigationPreview2()) {
                Text("GPNavigationPreview")
            }
            .gpToolbarItem(leftItems: [.logo()], rightItems: [.magnifyingGlass()])  // <-- 👀 2. to here
        }
        .gpNavigationTitle(.init("GPNavigationPreview"))
        // .gpToolbarItem(leftItems: [.logo()], rightItems: [.magnifyingGlass()])  // <-- 👀 1. move
    }
}

相关问题