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

205 Views Asked by At

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.

1

There are 1 best solutions below

0
nteissler On BEST ANSWER

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)
            }
        }
    }
}