Масштабирование и позиционирование в QML - PullRequest
Новая
       27

Масштабирование и позиционирование в QML

0 голосов
/ 16 февраля 2019

Я занимаюсь разработкой приложения Qt5.11.1 QML, которое работает на QQuickWidget.Режим изменения размера установлен на SizeRootObjectToView.Следовательно, всякий раз, когда я изменяю размер QMainWindow, я вижу мой корневой объект QML, который тоже масштабируется.

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

Я начинаю с абсолютной позиции и размера, когда соотношение составляет 1: 1.Пример: корневой элемент имеет размер 1920x1080 пикселей, и я должен поместить другие элементы (в основном изображения и тексты) в заданные координаты.

Когда корень меняет свой размер, все элементы должны следовать за ним.Я попробовал это: 

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0

Rectangle {
    id: root
    visible: true
    color: "black"

    property real ratio: root.width / 1920

    readonly property real x_CenterGauge: 502
    readonly property real y_CenterGauge: 489

    Image {
        x: x_CenterGauge * ratio
        y: y_CenterGauge * ratio
        scale: ratio
    }
}

, но это не работает, потому что свойство root.width (и, в свою очередь, ratio) не изменяется при изменении размера окна.Но это на самом деле изменяет размер корневого элемента, потому что любой привязанный элемент тоже изменит размер!Я получаю изменение только в том случае, если окно развернуто или свернуто.

Я прочитал эту статью и этот вопрос , но я все еще не понимаю, как обращаться сизменение размера в QML.

1 Ответ

0 голосов
/ 18 февраля 2019

При тестировании это проблема масштаба, которая кажется проблемой. Изменяя ширину и высоту, она решает проблему 

Rectangle {
    id: root
    visible: true
    color: "black"

    property real ratio: root.width / 1920

    readonly property real x_CenterGauge: 202
    readonly property real y_CenterGauge: 489

    Image {
        x: root.x_CenterGauge * root.ratio
        y: root.y_CenterGauge * root.ratio

        width: implicitWidth * root.ratio
        height: implicitHeight * root.ratio
        //scale: ratio
    }
}
...