Адаптивный интерфейс на Qt+Qml для Android

Не так давно мне стало интересно писать мобильные приложения используя qt, и еще в первый же день появился вопрос, как сделать приложение адаптивным к любому устройству.

Потратив несколько часов на гугление, понял, что на русскоязычном сообществе не хватает материала на эту тему, и поэтому в этой статье предложу вам примитивный, но очень рабочий вариант, чтобы вы не тратили на этот вопрос много времени как я.

Основная идея


Вся идея — получить разрешение устройства с помощью объекта QScreen, прописываем это в main.cpp:

    ...
    #include <QGuiApplication>
    #include <QScreen>
    ...
    QGuiApplication app(argc, argv);
    QScreen *screen = app.primaryScreen();
    int width = screen->size().width();
    int height = screen->size().height();
    ...

Далее создаем свойства для ширины и высоты, это проделываем в главном файле интерфейса main.qml:

    property int swidth: 0
    property int  sheight: 0
    width: swidth
    height: sheight

Любым удобным способом записываем в них значение определенных размеров экрана в том же main.qml:

Connections {
        target: appCore
        onSendResolution: {
            swidth = width
            sheight = height
        }
    }

А после очень просто делим все наши размеры на коэффициенты:

    Button {
        id: startbutton
        x:swidth/2.76
        y:sheight/3.13
        width: swidth/3.6
        height: sheight/8.66
    }

Таким образом, все позиции и размеры элементов будут зависеть от пиксельных размеров экрана, и приложение будет одинаково выглядеть на любых устройствах.

Минусом будет то, что размеры придется так указывать всем элементам, и нужно будет решить проблему размера текста, потому что с ним все не так гладно, если у устройства будут нестандартные размеры. Однако в остальном такой способ очень прост для новичка, и этого будет достаточно для первого релиза.

Надеюсь, эта статья помогла новичкам в qt, блуждающим по рунету в поисках решений адаптивного интерфейса.
Tags:
qt, qml, android, flexibility, adaptive layout

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.

Similar posts