navigationTitle Scroll Behavior Fails when NavigationSplitView has Overlay or ZStack

Question

henningko OP

Created Sep ’23

Replies 1

Boosts 0

Participants 1

I have tried updating my app form NavigationView to NavigationSplitView.

Previously, my code looked like this:

//  ContentView.swift

import SwiftUI
import SwiftData

struct ContentView: View {
    
    @Environment(\.modelContext) private var context
    @Query(sort: \Note.created, order: .reverse) var notes: [Note]
    
    
    var body: some View {
        NavigationView {
            ScrollViewReader { scrollProxy in
                ZStack() {
                    NoteListView(notes: notes)
                    NoteInputView(scrollProxy: scrollProxy)
                        .frame(maxHeight: .infinity, alignment: .bottom)
                }
            }
            .navigationBarTitle(Text("Notes"))
        }
    }
}

The reason I am using a ZStack is because the NoteInputView has a keyboard that should be dismissible on tap. However, there is a bug that prevents swipeActions from receiving a tap if onTapGesture is used elsewhere, see description here: https://stackoverflow.com/questions/77162726/swiftui-swipeactions-not-working-when-tap-gesture-is-used-elsewhere-focusstate

When using NavigationView, this behaves just fine:

Scrolled down:

Screenshot 2023-09-26 at 12.55.16 PM.jpeg

Scrolled to top:

Screenshot 2023-09-26 at 12.56.28 PM.jpeg

Using NavigationSplitView, my code looks like this:

//  ContentView.swift

import SwiftUI
import SwiftData

struct ContentView: View {
    
    @Environment(\.modelContext) private var context
    @Query(sort: \Note.created, order: .reverse) var notes: [Note]
    
    @State var selection: Set<Note> = []
    
    var body: some View {
        ScrollViewReader { scrollProxy in
            NavigationSplitView {
                ZStack {
                    NoteListView(notes: notes, selection: $selection)
                    NoteInputView(scrollProxy: scrollProxy)
                        .frame(maxHeight: .infinity, alignment: .bottom)
                }
                .navigationTitle(Text("Notes"))
            } detail: {
                if let noteSelected = selection.first {
                    NoteView(note: noteSelected)
                } else {
                    Text("No note selected")
                        .foregroundStyle(Color.secondary)
                }
            }
        }
    }
}

Where now the toolbar/title doesn't scroll appropriately:

Removing ZStack and putting the NoteInputView into an .overlay results in the same behavior. When I remove the ZStack and my NoteInput, the scrolling also works as desired. Wrapping the ZStack into a ScrollView hides the notes.

Seems to me that this might be a bug, or does anyone have another workaround in mind?

Boost

Answer 1

henningko OP

Sep ’23

A workaround—stumbled across it and have no idea why it'd work (but it does):

NavigationSplitView {
    ZStack {
        NoteListView(notes: notes, selection: $selection)
            // Workaround for https://developer.apple.com/forums/thread/738313
            // Needs to be > 110?
            .padding(.top, -120)
            .padding(.top, 120)
            // Prevent notes from being covered by input
            .padding(.bottom, 100)
        
        NoteInputView(scrollProxy: scrollProxy)
            .frame(maxHeight: .infinity, alignment: .bottom)
    }
    .navigationTitle(Text("Notes"))
}

The padding needs to be sufficiently large for it to work on all iOS devices, e.g. -1 & +1 won't work. Roughly seems to correspond to the space that the expanded toolbar (e.g. large title) occupies.

0