iOS DisclosureGroup content clipping

Question

Created Jun ’24

Replies 2

Boosts 0

Views 1.1k

Participants 2

I have a SwiftUI page that I want to simplify by showing basic information by default, and putting the additional info behind a "Details" DisclosureGroup for advanced users.

I started by laying out all the components and breaking things into individual Views. These all are laid out and look fine.

Then I took several of them and added them inside a DisclosureGroupView.

But all of a sudden, the views inside started getting crunched together and the contents of the DisclosureGroup got clipped about 2/3 of the way down the page. The problem I'm trying to solve is how to show everything inside the DIsclosureGroup.

The top-level View looks like this:

VStack {
  FirstItemView()
  SecondView()
  DetailView() // <- Shows disclosure arrow
}

Where DetailView is:

struct DetailView: View {
    @State var isExpanded = true
    
    var body: some View {
        GeometryReader { geometry in
            DisclosureGroup("Details", isExpanded: $isExpanded) {
                 ThirdRowView()
                 Spacer()
                 FourthRowView()
                 VStack {
                     FifthRowWithChartView()
                     CaptionLabelView(label: "Third", iconName: "chart.bar.xaxis")
                }
            }
        }
    }
}

The FifthRowWithChartView is half-clipped. One thing that might contribute is that there is a Chart view at the bottom of this page.

I've tried setting the width and height of the DisclosureGroup based on the height returned by the GeometryReader, but that didn't do anything.

This is all on iOS 17.6, testing on an iPhone 15ProMax. Any tips or tricks are most appreciated.

Boost

Answer 1

Vision Pro Engineer OP

Apple

Jul ’24

Accepted Answer

Recommended

Hey @raminf there's a few options here.

Do you want the entire view, including the DisclosureGroup to scroll? Or do you just want the DisclosureGroup to scroll?

Right now, SwiftUI is trying to fit everything on the one page. It is starting to clip because you have probably too much content to show.

If you want everything to scroll, put a ScrollView outside of the VStack on your outermost layer. Remember to set a height (or minHeight) on that VStack to ensure the right proportions.

If you only want the content of the DisclosureGroup to scroll, put the ScrollView with a VStack inside of that instead.

Best, Sydney

0

Answer 2

raminf OP

Jul ’24

Thank you!

That solved the problem. I put the ScrollView inside the innermost layer and set the height of the DisclosureGroup based on geometry.size.height. Now it shows and I have a feeling it'll look better on smaller devices.

One thing, though. After trying the ScrollView on the outermost view (outside the top-level View), tapping the DisclosureGroup no longer expands it. It won't impact my design, but it might bite someone else.

Thanks again!

1