Animation for DisclosureGroup open/close

Question

Created Jul ’20

Replies 6

Boosts 0

Views 3.9k

Participants 5

A disclosure group in a list animates the open close when you tap on the > icon. I need to support tapping on the entire title label. This code works below, but the tapGesture on the label does not do any animation like the > button does. Is there some way to have DisclosureGroup use the same animation as it does itself?

Code Block 		@State var guestsExpanded: Bool = true
		
		var body: some View
		{
				List()
				{
						DisclosureGroup(isExpanded: $guestsExpanded, content:
						{
								ForEach( model.guests ) { guest in GuestView(guest: guest, selectedGuests: $selectedGuests) }
						}, label: {	Text("Guests").onTapGesture { guestsExpanded = !guestsExpanded } })
						...
				}
		}

Boost

Answer 1

BabyJ OP

Jul ’20

I’ve got a way for you to be able to expand the DisclosureGroup by tapping either on the label or the arrow but not the row as a whole.

Code Block SwiftDisclosureGroup(isExpanded: $guestsExpanded) {
	ForEach(model.guests) { ... }
} label: {
	Button("Guests") {
		withAnimation {
			guestsExpanded.toggle()
		}
	}
	.foregroundColor(.primary)
}

I am have also encountered this strange behaviour of having to tap only on the small arrow to toggle the DisclosureGroup.

1

Answer 2

bigidle OP

Jul ’20

This works for the whole label, but still can't get the animation:

Code Block , label:
{
		HStack
		{
				Text("Guests")
				.padding(EdgeInsets(top: 0, leading: 8, bottom: 0, trailing: 8))
				.font(.headline)
		}
		.frame(maxWidth: .infinity, alignment: .leading)
		.contentShape(Rectangle())
		.onTapGesture { guestsExpanded = !guestsExpanded }
}

0

Answer 3

BabyJ OP

Jul ’20

This should be fixed in another beta because I’ve seen DisclosureGroups in Apple’s own apps be expandable by tapping anywhere in the row. Hopefully, this isn’t its intended behaviour in SwiftUI.

0

Answer 4

lcurry OP

Aug ’20

Hi,

Perhaps wrap it with a withAnimation{} block:

.onTapGesture {
withAnimation { guestsExpanded.toggle() }
}

Thanks

1

Answer 5

devinthecold OP

Nov ’20

Building on @BabyJ's answer, here's how you can get the entire row to be tappable:

Code Block Swift
DisclosureGroup(isExpanded: $guestsExpanded){
	ForEach(model.guests) { ... }
} label: {
    HStack {
	    Button("Guests") {
		    withAnimation {
			    guestsExpanded.toggle()		
            }
	    }
      .foregroundColor(.primary)
      Spacer()
    }
    .contentShape(Rectangle())
}

0

Answer 6

sowenjub OP

Apr ’21

I can confirm that @lcurry's solution work.
Also, I put the onTapGesture on the DisclosureGroup, not on the Text label.

Code Block swift@State var isGuestsExpanded: Bool = true
var body: some View {
    List()  {
        DisclosureGroup(isExpanded: $isGuestsExpanded, content:	{
                ForEach( model.guests ) { guest in GuestView(guest: guest, selectedGuests: $selectedGuests) }
     		}, label: {
            Text("Guests")
        }.onTapGesture {
            withAnimation { isGuestsExpanded.toggle() }
        }
    }
}

0