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

Hello! I’m trying to do this:

https://lemmy.kde.social/pictrs/image/21993b82-655c-4cdd-a06e-14203f33f790.png

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.


<span style="color:#323232;">Kirigami.ApplicationWindow {
</span><span style="color:#323232;">   pageStack.initialPage: Kirigami.ScrollablePage {
</span><span style="color:#323232;">      Kirigami.SearchField { // TODO move in the page header
</span><span style="color:#323232;">         id: searchField
</span><span style="color:#323232;">         Layout.fillWidth: true
</span><span style="color:#323232;">      }
</span><span style="color:#323232;">   }
</span><span style="color:#323232;">}
</span>

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


<span style="color:#323232;">Kirigami.ApplicationWindow {
</span><span style="color:#323232;">    header: Kirigami.SearchField { // TODO move in the page header
</span><span style="color:#323232;">         id: searchField
</span><span style="color:#323232;">         Layout.fillWidth: true
</span><span style="color:#323232;">      }
</span><span style="color:#323232;">   pageStack.initialPage: Kirigami.ScrollablePage {
</span><span style="color:#323232;">     
</span><span style="color:#323232;">   }
</span><span style="color:#323232;">}
</span>

https://lemmy.kde.social/pictrs/image/2fbb2c98-6335-4b8c-a0dd-de61e0290d69.png

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:


<span style="color:#323232;">Kirigami.ApplicationWindow {
</span><span style="color:#323232;">    Kirigami.SearchField { // TODO move in the page header
</span><span style="color:#323232;">         id: searchField
</span><span style="color:#323232;">         Layout.fillWidth: true
</span><span style="color:#323232;">      }
</span><span style="color:#323232;">   pageStack.initialPage: Kirigami.ScrollablePage {
</span><span style="color:#323232;">     
</span><span style="color:#323232;">   }
</span><span style="color:#323232;">}
</span>

https://lemmy.kde.social/pictrs/image/3eeb22b7-6347-4268-8f15-b25309a92c0d.png

what is the correct way of doing this?

thanks in advance!

herzenschein Mod , (edited )
@herzenschein@pawb.social avatar

So what you want to do is put a Kirigami.SearchField inside the global toolbar created by the Kirigami.Page. It’s not a header.

In the first case you’re putting it inside the page, and because it’s a direct child of a Kirigami.Page, it is automatically laid out for you, which is fine, but not what you want.

In the second case you’re putting it in the header of the ApplicationWindow, but you actually want to put in the global toolbar of the page, so it’s not what you want.

In the third case you’re just putting a SearchField before the initialPage, so it’s loaded on the same level as the page, it’s not what you want.

You can put it in the header property of the Kirigami.Page, but the header area of the page doesn’t include the global toolbar, so they just happen to be close together by chance.

The way I’d have expected to do that would be to override the globalToolBarItem of the Kirigami.Page, but it’s read only, so I don’t really know how to help you with that. You should ask in the Kirigami Matrix room or in the Discuss forum.

herzenschein Mod ,
@herzenschein@pawb.social avatar

Also, you should only use Layout attached properties when the object you’re using it on is a child of a Layout, for example:


<span style="color:#323232;">ApplicationWindow {
</span><span style="color:#323232;">    ColumnLayout {
</span><span style="color:#323232;">        anchors.fill: parent // Not a child of a layout, so you use anchors
</span><span style="color:#323232;">        Controls.Button {
</span><span style="color:#323232;">            Layout.fillWidth: true // It's a child of a layout, so you use Layout.fillWidth
</span><span style="color:#323232;">        }
</span><span style="color:#323232;">    }
</span><span style="color:#323232;">}
</span>
tubbadu OP ,

The way I’d have expected to do that would be to override the globalToolBarItem of the Kirigami.Page, but it’s read only, so I don’t really know how to help you with that. You should ask in the Kirigami Matrix room or in the Discuss forum.

Thank you very much for the detailed answer! So there is no “quick and easy” way to do it :(
I’ll try to look for info in the matrix room you linked, thanks!

theinternetisforporn14 ,

I am not an expert in kirigami, but I think you have to roll your own version of ApplicationWindow.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • random
  • [email protected]
  • All magazines
    •