2y ago

What is the correct way to place a Kirigami.SearchField inside the window header?

Hello! I'm trying to do this:

but I can't seem to find a "good" way to do it:

if I just place it in the Kirigami.Page it is displayed, well, in the page, as in the image above.

qml

    
Kirigami.ApplicationWindow {
   pageStack.initialPage: Kirigami.ScrollablePage {
      Kirigami.SearchField { // TODO move in the page header
         id: searchField
         Layout.fillWidth: true
      }
   }
}

if I place it in the header of the window it is displayed before the actual header even:

qml

    
Kirigami.ApplicationWindow {
    header: Kirigami.SearchField { // TODO move in the page header
         id: searchField
         Layout.fillWidth: true
      }
   pageStack.initialPage: Kirigami.ScrollablePage {
     
   }
}

if I place it just before the Page it goes inside the header, but all aligned to the top instead of nicely in the center:

qml

    
Kirigami.ApplicationWindow {
    Kirigami.SearchField { // TODO move in the page header
         id: searchField
         Layout.fillWidth: true
      }
   pageStack.initialPage: Kirigami.ScrollablePage {
     
   }
}

what is the correct way of doing this?

thanks in advance!