11.5 C
London
Tuesday, February 20, 2024

ios – ScrolllView Extent to backside of display screen in NavigationStack


I’ve a SwiftUI App with a TabView with 5 tabs. After I select my final tab I’ve a view with the next physique:

var physique: some View
{
    NavigationStack {
        ScrollView {
            let columns = [
                GridItem(.fixed(imageWidth), spacing: colEndPadding),
                GridItem(.fixed(imageWidth), spacing: colEndPadding),
                GridItem(.fixed(imageWidth), spacing: colEndPadding)
            ]
            LazyVGrid(columns: columns, spacing: colEndPadding) {
                ForEach(0..<18, id: .self) { index in
                    Rectangle()
                        .foregroundColor(Colour(
                            pink: .random(in: 0...1),
                            inexperienced: .random(in: 0...1),
                            blue: .random(in: 0...1),
                            opacity: 1.0
                        ))
                        .body(width: imageWidth, top: imageHeight)
                }
            }
            .padding(.horizontal)
        }
        .navigationBarHidden(false)
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Menu(content material: {
                    MoreMenuButtonTextWithImage(label: "Possibility 1", systemImageName: "folder.badge.plus") { }
                    MoreMenuButtonTextWithImage(label: "Possibility 2", systemImageName: "folder.badge.plus") { }
                    MoreMenuButtonTextWithImage(label: "Possibility 3", systemImageName: "folder.badge.plus") { }
                    
                    Divider()
                    
                    MoreMenuButtonText(label: "Possibility A") { }
                    MoreMenuButtonText(label: "Possibility B") { }
                    MoreMenuButtonText(label: "Possibility C") { }
                }, label: {
                    Picture(systemName: "ellipsis.circle")
                        .foregroundColor(Colour("allstar_Ice"))
                })
            }
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbarBackground(.seen, for: .navigationBar)
    }
    .background(Colour.pink)
    .background(
        GeometryReader { geometry in
            Colour.clear
                .onAppear {
                    let screenWidth: CGFloat = geometry.measurement.width
                    let cols = 3.0
                    imageWidth = (screenWidth - (colEndPadding * (cols - 1))) / 3
                    imageHeight = (((screenWidth - (colEndPadding * (cols - 1))) / 3) * 16) / 9
                    Self.log.information("Line: (#line), File: (#file), Perform: (#operate): (#file):(#operate):(#line), *** imageWidth=(imageWidth), imageHeight=(imageHeight)")
                }
        }
    )
}

It’s a NavigationStack, additionally tried NavigationView, I gave the NavigationStack a pink background to point the difficulty, however I additionally tried clear and no background modifier. The problem seems to be with the ScrollView, it doesn’t prolong all the best way to the underside of the display screen. If I take away the Navigation View it really works as anticipated.

How do I make the Scrollview prolong to the underside of the display screen?

I’ve tried .ignoresSafeArea(), .ignoresSafeArea(edges: .all) on the ScrollView and the NavigationStack and a number of other different concepts, resembling wrapping the ScollView in a ZStack and others.

Can anybody shed some mild as to how one can make this work correctly?

enter image description here

Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here