swiftuiswiftui-navigationlinkswiftui-navigationviewdisclosuregroup

How to I show a NavigationLink in a DisclosedGroup (SwiftUI)?


I'm trying to show a few items such as NavigationView in a DisclosureGroup and the group when opened shows nothing. Can someone help me (I'm just starting with SwiftUI)? An example of what I want to do:

import SwiftUI

@main
struct ContentView: App { var body: some Scene { WindowGroup {
    NavigationSplitView {
        DisclosureGroup("DisclosureGroup") { List {
            NavigationLink {
                Text("disclosure link")
            } label: { HStack {
                Text("disclosure linky linky link lonk")
                Spacer()
                Image(systemName: "link")
            }}
            HStack {
                Text("disclosure aaa")
                Spacer()
                Text("disclosure bbb")
            }
        }}
        
        List {
            NavigationLink {
                Text("link")
            } label: { HStack {
                Text("linky linky link lonk")
                Spacer()
                Image(systemName: "link")
            }}
            HStack {
                Text("aaa")
                Spacer()
                Text("bbb")
            }
        }
    } detail: {
        Text("Detail")
            .font(.largeTitle)
    }
}}}

This was made in Playgrounds (by Apple). This is the only file.

I don't know what else I can do. All that happens is the disclosure group ends up blank.


Solution

  • Flatten out your list structure. DisclosureGroup will produce rows for the views inside it if it is within a List, so the double-nesting is not expected by SwiftUI.

    import SwiftUI
    
    @main
    struct MyApp: App {
        var body: some Scene {
            WindowGroup {
                NavigationSplitView {
                    List {
                        DisclosureGroup("DisclosureGroup") {
                            NavigationLink {
                                Text("disclosure link")
                            } label: { HStack {
                                Text("disclosure linky linky link lonk")
                                Spacer()
                                Image(systemName: "link")
                            }}
                            HStack {
                                Text("disclosure aaa")
                                Spacer()
                                Text("disclosure bbb")
                            }
                        }
                        
                        NavigationLink {
                            Text("link")
                        } label: { HStack {
                            Text("linky linky link lonk")
                            Spacer()
                            Image(systemName: "link")
                        }}
                        HStack {
                            Text("aaa")
                            Spacer()
                            Text("bbb")
                        }
                    }
                } detail: {
                    Text("Detail")
                        .font(.largeTitle)
                }
            }
        }
    }