HomeiOS Developmentios - Including a Picker to a NavigationView internet hosting a TabView

ios – Including a Picker to a NavigationView internet hosting a TabView


I hoped so as to add a TabView (as a .web page) inside a NavigationView, and have a Picker to manage the navigation between them.

I’ve the performance, however when it’s rendered there are white segments – one within the navigation bar, the opposite within the backside protected space.

As a result of I’ve a Record within the TabView, I assume that’s what is inflicting the .navigationTitle to not scroll. Nevertheless, I used to be questioning if there’s a technique to obtain it?

That is the code that I’ve:

struct ContentView: View {
  enum Tabs: String, CaseIterable, Identifiable {
    var id: String { rawValue }
    case all
    case saved
    case deleted
  }
  @State non-public var selectedTab: Tabs = .all
  var physique: some View {
    NavigationView {
      TabView(choice: $selectedTab) {
        Record {
          ForEach(0..<10) { index in
            Textual content("Merchandise quantity: (index)")
          }
        }
        .tag(Tabs.all)
        Record {
          ForEach(20..<30) { index in
            Textual content("Merchandise quantity: (index)")
          }
        }
        .tag(Tabs.saved)
        Record {
          ForEach(30..<40) { index in
            Textual content("Merchandise quantity: (index)")
          }
        }
        .tag(Tabs.deleted)
      }
      .tabViewStyle(.web page(indexDisplayMode: .by no means))
      .navigationTitle("My gadgets")
      .navigationViewStyle(.stack)
      .toolbar {
        ToolbarItem(placement: .principal) {
          Picker("", choice: $selectedTab) {
            ForEach(Tabs.allCases) { tab in
              Textual content(tab.rawValue.capitalized)
                .tag(tab)
            }
          }
          .pickerStyle(.segmented)
          .body(width: 300, top: 40)
        }
      }
    }
  }
}

Which produces this:

Toolbar modifier

Nevertheless, I would like the white components to not be there (including in ignoreSafeArea removes backside white, however causes the title to overlay):

Ignore safe area output

Supposed output:

Intended output

I’ve additionally tried foregoing the title, and solely having the Picker, however the banner continues to be white separated.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments