Question 363394 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – Remove padding / spacing between label and content in a disclosure group

I am creating a disclosure group as follows:

DisclosureGroup(isExpanded: $isShowingAllOpeningHours) {
    Text("Content")
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(.red)
        .padding(.bottom, .zero)
} label: {
    Text("Title")
        .background(.green)
        .padding(.bottom, .zero)
}
.background(.yellow)

I’ve added the colors just to illustrate the point

This gives me the following the the disclosure group is collapsed

Disclosure group custom SwiftUI

And this when it is expanded

custom Disclosure group expanded SwiftUI

There seems to be some padding around the label in a disclosure group as seen by the yellow background.

Is there a way to remove this padding.

Since this disclosure group is within a scrollview, I’ve tried adjusting insets but this did not work either.

Tags:

2

Answers


  1. 0

    The extra padding appears to be 4pt at top and bottom. This stays the same even when the text size is increased.

    You can eliminate it by applying negative padding of the same amount:

    Text("Title")
    .background(.green)
    // .padding(.bottom, .zero)
    .padding(.vertical, -4) // 👈

    Screenshot

    Of course, the padding may change in a future iOS release. So you may want to restrict the workaround to versions for which you have tested it.

    Login or Signup to reply.
  2. 0

    You can use your own DisclosureGroupStyle. Make it a VStack with 0 spacing. You do need to reinvent the expansion logic

    struct NoVerticalPadding: DisclosureGroupStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 0) {
            Button {
                withAnimation {
                    configuration.isExpanded.toggle()
                }
            } label: {
                HStack {
                    configuration.label
                    Spacer()
                    Image(systemName: configuration.isExpanded ? "chevron.up" : "chevron.forward")
                        .contentTransition(.symbolEffect)
                }
            }
            if configuration.isExpanded {
                configuration.content
                    .transition(.asymmetric(insertion: .push(from: .bottom), removal: .identity))
            }
        }
    }
}

extension DisclosureGroupStyle {
    static var noVerticalPadding: NoVerticalPadding { .init() }
}

    At the end of the DisclosureGroup, add

    .disclosureGroupStyle(.noVerticalPadding)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search