disclosure group title as pinned header for swiftui

Question

I have a big disclosure group that its bigger that the entire screen. It is basically a big amount of text.

How can I add a pinned header at the top will I am scrolling down?

I need this because I want the user to know what disclosure group its reading at the moment.

Section already does this but I want to use disclosure groups because they are easier to bind, as well as expand/collapse.

There is a tutorial for section but I want for disclosure group: https://swiftontap.com/pinnedscrollableviews/sectionheaders

Is this possible is disclosure group?

DisclosureGroup("First description") {
    Text("big amount of text")
}

Answer 1

It seems pretty difficult with DisclosureGroup but I you can replicate replicate similar type behaviour quite simply with a custom view as below. This is a little rudimentary but hopefully gives you some ideas and something functioning to work with. You can replicate the DisclosureGroup look and feel and expand chevron in the CustomDisclosure HStack. The main issue to be aware of is that ZStack tries to take all the space it is offered and so sometimes the collapsed rows seem to remain their expanded size if there is free space available. Something you can work on further.

I have updated the custom DiscloseView so it now takes the expanded view in as a closure, the same as DisclosureGroup, VStack etc. so you can customise the expanded view as you like.

import SwiftUI

struct CustomDisclosure<ExpandedView: View>: View {
var title: String
var contentView: () -> ExpandedView
@State var isExpanded: Bool = false

init(_ title: String , @ViewBuilder _ content: @escaping  () -> ExpandedView) {
    self.title = title
    self.contentView = content
}

var body: some View {
        Section {
            if isExpanded {
                contentView()
            }
        } header: {
            HStack {
                Text(title)
                    .foregroundColor(.blue)
                Spacer()
                Image(systemName: "chevron.right")
            }.onTapGesture {
                isExpanded.toggle()
            }
            .background(.white)
            .padding(.bottom , 12)

        }
}
}

struct ContentView: View {
    
    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: .sectionHeaders) {
                ForEach(1..<20) { i in
                    CustomDisclosure("Test \(i)") {
                        Text(bigText)
                    }
                }
            }
        }
        .padding()
    }
    
    var bigText: String = "Big Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \nBig Amount of text \n"
}