SwiftUI: how to use NavigationView in macOS?

Question

I have two separate Xcode projects that I'm using to learn SwiftUI:

A true macOS project (not Catalyst) on Mac.
An iOS project (iPhone).

The following code creates a simple NavigationView with master-detail views:

import SwiftUI

struct ListView : View {
    var body: some View {
        NavigationView {
            List() {
                NavigationButton(destination: Text("detail 1")) {
                    Text("row 1")
                }
                NavigationButton(destination: Text("detail 2")) {
                    Text("row 2")
                }
            }
        }
    }
}

#if DEBUG
struct ListView_Previews : PreviewProvider {
    static var previews: some View {
        ListView()
    }
}
#endif

It works as expected on iOS 👍

But on the macOS project the same code as above doesn't work the same way 🤯

When I launch the app on Mac, I get this window

And when I click on any row, the detail view just collapses/disappears, never showing me detail view.

Any ideas how to fix this? Maybe I'm missing something? Or perhaps this is just a bug?

I am hoping this is a temporary glitch, because I got to this point in Apple's tutorial and had to bail out: I've looked very hard for a replacement for this, and a way to implement a master-detail application in macOS with SwiftUI, but I cannot work out what we should use instead. — green_knight
– green_knight, Commented Jun 24, 2019 at 22:34

iphaaw · Accepted Answer · 2020-10-14 19:37:13Z

Here is my code that seems to fix it using Xcode 12.2 beta 3:

import SwiftUI

var listItems = ["Item 1", "Item 2", "Item 3", "Item 4"]
var secondItems = ["Second 1", "Second 2", "Second 3", "Second 4"]

struct ContentView: View
{
    
    @State var select: String? = "Item 1"
    var body: some View
    {
        VStack
        {
            NavigationView
            {
                List
                {
                    ForEach((0..<listItems.count), id: \.self)
                    {index in
                        NavigationLink(destination: SecondView(), tag: listItems[index], selection: $select)
                        {
                            Text(listItems[index])
                                .padding(.vertical, 2.0)
                        }
                    }
                    Spacer()
                    
                }.frame(width:160)
                                .listStyle(SidebarListStyle())
            }
            
            .toolbar
            {
                Text("this is not the title")
                Button(action: {})
                {
                    Label("Upload", systemImage: "square.and.arrow.up")
                }
            }
            .navigationTitle("My Title")
            .navigationViewStyle(DoubleColumnNavigationViewStyle())
        }
    }
}

struct SecondView: View {

    var body: some View {
        NavigationView {
            List
            {
                ForEach((0..<secondItems.count), id: \.self)
                {index in
                    NavigationLink(destination: Text(secondItems[index]))
                    {
                        Text(secondItems[index])
                            .frame(height: 20)
                    }
                }
            }.frame(width:150)
        }
    }
}

This makes a window like this:

rougement · Accepted Answer · 2019-06-17 18:44:39Z

4

I don't have the answer but I'm trying to do the same thing and have a few observations to add, maybe they will help:

Add a destination View:

NavigationButton(destination: DetailView()) {
            Text("Show Detail")
        }

Setting a width on the NavigationView stops the right-hand view from disappearing.

Also, adding

 .onAppear { print("DetailView called") }

to the detail view shows that, even though it isn't being displayed, the view is in fact called when the button is clicked.

Edit: it's there! The view was hidden by the divider, drag it left to see the detail view.

Edit 2: Xcode beta 2 gives a "'NavigationView' is unavailable in macOS" message.

edited Jun 17, 2019 at 18:44

answered Jun 17, 2019 at 15:01

rougement

1261 silver badge10 bronze badges

5 Comments

Salavat Khanov Over a year ago

"'NavigationView' is unavailable in macOS" bummer

green_knight Over a year ago

both NavigationView and NavigationButton are unavailable in Xcode 11b2 for me.

Salavat Khanov Over a year ago

In beta 3, they added NavigationView back: You can style a NavigationView using two new style properties: stack and doubleColumn. By default, navigation views on iPhone and Apple TV visually reflect a navigation stack, while on iPad and Mac, a split-view styled navigation view displays. (51636729) When using the doubleColumn style, you can provide two views when creating a navigation view - the first is the master and the second is the detail. For example: NavigationView { MyMasterView() MyDetailView() } .navigationViewStyle(.doubleColumn)

rougement Over a year ago

I saw that they added it back but I still can't get the detail view to show up without dragging the divider back from the right side of the window. Do you have any working code?

Mark McGookin Over a year ago

Did you guys ever figure this out? I'm having the same issue

user3339784 · Accepted Answer · 2023-04-27 03:26:17Z

2

NavigationSplitView

A view that presents views in two or three columns, where selections in leading columns control presentations in subsequent columns.

answered Apr 27, 2023 at 3:26

user3339784

511 silver badge8 bronze badges

1 Comment

XYZ Over a year ago

If you have a toolbar for your window, there is currently no way to hide the toggle sidebar button.

Collectives™ on Stack Overflow

SwiftUI: how to use NavigationView in macOS?

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related