How to set ApplicationWindow size to fit content?

Development
,
1

So, I’m developing a program using Kirigami/QtQuick. To clarify my level of understanding of the base concepts, I need to say that I don’t have a lot of experience in C++ development, especially with Qt, and my experience of UI development is pretty much limited to C#'s UI frameworks. Though so far QML seems easy enough.

Here is the very simplified version of the code:

import QtQuick
import QtQuick.Layouts
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    // ...
    pageStack.initialPage: Kirigami.Page {
        ColumnLayout {
            // some controls there
        }
    }
}

I want this window to take no more space than it requires to draw all of the content inside without it overlapping or going out of the window’s borders. I’ve thought that this would be a simple task, but after an hour of trying to find an answer to this online, I have completely failed, so that’s why I’m asking there.

I’m sorry if I’m asking in an incorrect place, because this category’s description is not very detailed, and I don’t know where else to ask.

2

You could try setting the window’s size (width and height) to the page’s implicit size (implicit width and height).

I think this is the correct section to ask this.

There are also various Matrix rooms for more “interactive” discussions, e.g. for Kirigami

3

Hm. So, you mean something like this?

Kirigami.ApplicationWindow {
    width: page.implicitWidth
    height: page.implicitHeight

    pageStack.initialPage: Kirigami.Page {
        id: page
    }
}

This causes such a behavior:

image
image282×252 9.78 KB

(I’ll continue in other posts, I can’t post more than one embedded file for some reason)

4

But, if I try to click on its corner to resize, it just pops out, enlarges, doesn’t allow me to make it smaller, and looks like this:

image
image288×312 10.4 KB

Besides this strange empty bar on the top (I believe it comes from Kirigami page? I’ll switch to QtQuick and use its ApplicationWindow in the future anyway, I don’t need nothing from Kirigami, so it doesn’t matter), everything works just like I would have wanted it. At the same time, for some reason in QtQuick without Kirigami this doesn’t work (while I didn’t use any explicit

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

ApplicationWindow {
    width: page.implicitWidth
    height: page.implicitHeight
    visible: true

    Page {
        id: page

        Button {
            text: "Ok"
        }
    }
}
5

It’s again looking like this:

image
image218×196 7.32 KB

6

But if I’m trying to resize it, it transform like this:

image
image288×312 9.26 KB

I can guess that it’s because the window is resized to the lowest possible size to fit contents, but the window manager has its own minimal size limit, which is not enforced for some reason if the window size was set programmatically, but is enforced if the window is resized by the client (desktop environment).

It’s also visible because the size of both windows is a little bit smaller than 288x312 (the size of images being 288x312, minus shadows, minus title bar - most likely it’s 256x256, but I can’t know for sure).

Is there any way to solve it? Thanks for trying to help!

7

Ohhhh, I just understood how stupid I am. Sorry! I think I’ll just go and add something like a safeguard to set the size on 256x256 if the implicit size is lower than that. I’ll mark your answer as a solution, thanks!

1 Like
8

For anyone who may strand upon this topic when searching for the same thing, I’ve made a mistake, the minimum size I’m able to set from the client (and to which it resizes) is 150x150 (seemingly 288x312 was set by the website), and yep, width: page.implicitWidth < 150 ? 150 : page.implicitWidth (plus the same for height) have worked perfectly.

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: page.implicitWidth < 150 ? 150 : page.implicitWidth
    height: page.implicitHeight < 150 ? 150 : page.implicitHeight
    visible: true

    Page {
        id: page

        Button {
            text: "Ok"
        }
    }
}
1 Like
9

Potentially also as width: Math.max(150, page.implicitWidth)

10

Ohhhh, yeah, it’s a much better way, I guess I was thinking too much imperative :sweat_smile: thanks for the advice!