9.5 C
New York
Tuesday, March 11, 2025

ios – (SwiftUI) Segmented Picker in a pinned SectionHeader doesn’t Replace ScrollView ContentHeight as anticipated


Inside a Scrollview, i’m making an attempt to have a pinned SectionHeader with a easy segmented PickerView, that may swap to 2 completely different merchandise Stacks. One very lengthy and one very brief. This works positive, so long as the SectionHeader will not be sticky. As quickly because it does grow to be sticky, the issues begin:

As you possibly can see within the video, if i scroll the lengthy left aspect (whereas sticky) after which swap to the brief proper aspect, the stickyHeader loses its anchored place. Is there any method to forestall this from occurring?I attempted a number of issues already with none success. (For instance, a GeometryReaders proxy that scrolls manually to the highest as quickly as i swap the faucet)

From my Understanding, the issue lies inside the ScrollViews ContentHeight, which does not get up to date appropriately. That is very a lot seen, because the ScrollViewIndicator doesn’t get a visible replace in his size additionally.

Is that this potential to realize, or is the PickerView not made to work inside a Listing of a number of Sections in any respect? Is there any method to replace the ScrollView ContentHeight in a method, that the stickyHeader retains its place?

Any Trace is far appreciated!

I’ve additionally added a video and the supply code for reference.

Issue with Sticky Picker and ScrollView Update When Switching Lists

struct ContentView: View {
    @State personal var tab = 0

    var physique: some View {
        VStack(spacing: 0) {
            let cols = [GridItem(.flexible())]
            
            ScrollView {
                LazyVGrid(columns: cols, pinnedViews: [.sectionHeaders]) {
                    
                    Part {
                        ForEach(1...2, id: .self) { rely in
                            Textual content("Part 1 Merchandise (rely)")
                                .body(maxWidth: .infinity, alignment: .main)
                              .padding().border(Shade.blue)
                        }
                    } header: {
                        Textual content("Part 1")
                            .body(maxWidth: .infinity, minHeight: 50, alignment: .heart)
                            .background(Shade.blue)
                    }

                    Part {
                        if tab == 0 {
                            ForEach(10...20, id: .self) { rely in
                                Textual content("Part 2 Tab 0 Merchandise (rely)")
                                  .body(maxWidth: .infinity, alignment: .main)
                                  .padding().border(Shade.purple)
                            }
                        }
                        
                        if tab == 1 {
                            ForEach(3...5, id: .self) { rely in
                                Textual content("Part 2 Tab 1 Merchandise (rely)")
                                    .body(maxWidth: .infinity, alignment: .main)
                                  .padding().border(Shade.purple)
                            }
                        }

                    } header: {
                        Picker("", choice: $tab) {
                            Textual content("Lengthy").tag(0)
                            Textual content("Brief").tag(1)
                        }
                        .pickerStyle(.segmented).padding().background(Shade.purple)
                    }
                }

                LazyVGrid(columns: cols) {
                        Part {
                            ForEach(30...50, id: .self) { rely in
                                Textual content("Part 3 Merchandise (rely)")
                                    .body(maxWidth: .infinity, alignment: .main)
                                    .padding().border(Shade.inexperienced)
                            }
                        } header: {
                            Textual content("Part 3")
                                .body(maxWidth: .infinity, minHeight: 50, alignment: .heart)
                                .background(Shade.inexperienced)
                            
                        }
                }
            }
        }
        .font(.caption)
    }
}

#Preview {
    ContentView()
}

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles