Detail View partly visible before Navigation Link selected SwiftUI for Mac OS

Question

I'm using a NavigationView with SwiftUI MacOS (Catalina) and for some reason the detail view and it's divider are partly visible before the NavigationLink is actually selected. Ideally I'd like the detail view to be hidden until something in the list is selected.

I've tried all sorts of combinations of minWidth on all the views but just can't get it to view correctly:

Heres my Main View:

var body: some View {
    VStack {
        NavigationView {
            List(networkManager.FileList!.items) { file in
                NavigationLink(destination: FileDetail(fileDetail: file)) {
                    FileRow(fileRow: file)
                }
            }
        }.frame(minHeight:300).background(Color.white)
    }
}

Here's my Row View:

var fileRow: Item
var body: some View {
     VStack(alignment: .leading) {
          HStack {
               Text(fileRow.name).font(Font.system(size: 12, weight: .regular, design: .default))
               Text(fileRow.path).font(Font.system(size: 12, weight: .regular, design: .default))
        }
    }
}

Here's my Detail View:

var fileDetail: Item
var body: some View {
     HStack {
          VStack {
               Text(fileDetail.name).font(.title)
               Text(fileDetail.created).font(Font.system(size: 12, weight: .regular, design: .default))
        }.background(Color.white).frame(minWidth:250, idealWidth:300, maxHeight: .infinity)
    }
}

EDIT: Looking in the Debug View Hierarchy it looks like the empty view is created for the DetailView with a view.width of 10:

Asperi Asperi · Accepted Answer · 2020-07-20T12:59:58

On macOS NavigationView has master/details style, so even if no detail is provided it adds some implicit.

Here is possible solution.

Not all dependent entities provided so tested on some replicated code. Xcode 11.4 / macOS 10.15.5.

var body: some View {
    VStack {
        NavigationView {
            List(items) { file in
                NavigationLink(destination: FileDetail(fileDetail: file)) {
                    FileRow(fileRow: file)
                }
            }

            // add explicit stub view for details pane 
            // on no selection with zero width
            Rectangle().frame(maxWidth: 0, maxHeight: .infinity) 

        }.frame(minHeight:300).background(Color.white)
    }
}

Detail View partly visible before Navigation Link selected SwiftUI for Mac OS

1 Answers