Sticky Header with Lists (SwiftUI)

In the main screen of the application I need to have the following from top to bottom:

  • A row with a logo and an icon when clicked it shows an alert

  • A row with a text and the edit button for the list EditButton()

  • Search Bar of the list in this case I am just assigning .searchable() for the list

  • The list itself of some cards

  • A button that is just sticked to the bottom of the screen.

The problem is in the first two rows. It's worth mentioning that those two rows mentioned above isn't scrolling with the list they are always sticky at the top. I know that this goes against the apple guidelines however, it needs to be done this way.

The approaches I did so far was the following (In the following i will refer to the two rows that we are trying to stick to the top as the header as it's a one unit):

  • Trying to stick up the header at the top like I do with the button sticked to the bottom by using .frame(alignment: .top). However, it gets placed under the search bar not above it.

  • Tried putting the header as a section header and inside this section the looping on the list items. Like case 1 the header gets placed under the search bar not above it.

  • Tried placing the header as a ToolbarItem for the VStack of the whole screen it does actually stick to the top but the problem is the button in the second row which is far right isn't clickable and the button in the far right of the first row is clickable while we need both clickable. When experimenting It's actually not related to the first and second row it's more related to the distance between the button and the top of screen after some threshold i don't know it for sure the button becomes unclickable. In other words, as if the toolbar height has a maximum when you cross it the area there isn't clickable. (and yes we need to have this height that cause the problems).

It's also worth mentioning that in approaches 1 and 2 there is a problem that there is a big space above the search bar, and i don't know where it's coming from. I had an assumption it's from the navigation view (It needs to be there since this is the main screen). So I had navigation .navigationBarHidden(true) but didn't do anything.

Any thoughts ??

Sticky Header with Lists (SwiftUI)
 
 
Q