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

Hongtron · Answer 1 · 2023-03-13T16:34:08.533

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

Good Idea. The problem is that I dont use only that text, I use images, lists, another views, etc — dhaval123, Mar 08 '23 at 15:09
You can change the var text: String to be a view rather than just a string? Do you know how to do that or I can update the example. — Hongtron, Mar 08 '23 at 15:10
I have updated the answer so the CustomDisclosure now will take a view as a closure the same as DisclosureGroup, VStack etc. so you can use it the same with any view contents. One thing to note is by using ZStack the title is actually on top of the scroll view so I have added a hidden version of the title as the top of that view to push the scroll view beneath the title. — Hongtron, Mar 08 '23 at 15:30
But this still does not show the header when passing over like in the Section — dhaval123, Mar 08 '23 at 20:07
I have updated it further using section headers in the custom view which produces something much closer. Ultimately it's a trade off between using the standard functionality in section headers and working around that versus trying to implement a custom functionality using techniques I have shown above. I would recommend looking further in to the ViewBuilder and generics (ie. the use of in the definition) as these provide some great tools to build custom views like this that can then operate using closures of any view similar to how VStack etc. work. — Hongtron, Mar 09 '23 at 04:27

disclosure group title as pinned header for swiftui

1 Answers1