NavigationSplitView with Custom Views as Labels

Question

Created Jun ’22

Replies 1

Boosts 0

Views 1.2k

Participants 2

I am working on seeing if I can use the new MultiColumn navigation pattern and so far it seems like it really is only useful if you have very simple text based navigation. I have tried a couple different combinations but doesn't seem to be able to support this as it would mean having conflicting navigation links. If I am missing something to be able to accomplish this that would be helpful.

@State var selectedNavigationCategory: NavigationCategory?

let navigationCategories: [NavigationCategory] = [
     NavigationCategory(id: UUID(), name: "One", sfSymbol: "circle", detailView: ViewOne()),
     NavigationCategory(id: UUID(), name: "Two", sfSymbol: "circle.fill", detailView: ViewTwo())
]

var body: some View {
     NavigationSplitView {
          List(navigationCategories, selection: $selectedNavigationCategory) { category in
               NavigationLink(value: category, label: {
                    Label(category.name, systemImage: category.sfSymbol)
               })
          }
     } detail: {
          //How to control the view that gets presented
     }

Like I mentioned tried a couple things with no success, even returning a view as part of the Navigation Category (which you'll see I left in). Is this really not possible?

Boost

Answer 1

BabyJ OP

Jun ’22

I'm not really sure what you're asking. If you want to know how to show a different view based on the current selection then you can see the ammended code below:

@State var selectedNavigationCategory: NavigationCategory?

let navigationCategories = [
    NavigationCategory(id: UUID(), name: "One", sfSymbol: "circle"),
    NavigationCategory(id: UUID(), name: "Two", sfSymbol: "circle.fill")
]

var body: some View {
    NavigationSplitView {
        List(navigationCategories, selection: $selectedNavigationCategory) { category in
            NavigationLink(value: category) {
                Label(category.name, systemImage: category.sfSymbol)
            }
        }
    } detail: {
        ZStack { // workaround in beta 2
            if let selectedNavigationCategory {
                // Something has been selected
                // Show the corresponding view for this
                Text("You selected \(selectedNavigationCategory.name)")
            } else {
                // Nothing is selected
                // Placeholder text
                Text("Select something")
            }
        }
    }
}

0