Как установить различные анкеры в QML + JS для горизонтальной и вертикальной ориентации - PullRequest
Новая
       12

Как установить различные анкеры в QML + JS для горизонтальной и вертикальной ориентации

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

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

У меня есть два квадрата.Если горизонтальный вид - я бы хотел, чтобы они располагались один рядом с другим по горизонтали, каждый на 1/4 ширины экрана.И когда creen вертикальный: я хотел бы, чтобы они были один над и один ниже, каждый с шириной экрана 1/2, смотрите: 

+-------------+    +---------+
|             |    |         | 
|   AAA BBB   |    |  AAAAA  |
|   AAA BBB   |    |  AAAAA  |
|             |    |  BBBBB  |
+-------------+    |  BBBBB  |
                   |         |
                   +---------+

Я могу установить каждый якорь как: anchors.left: horizontal() ? parent.left : id_of_a.left где horizontal() это функция js, но она начинает выглядеть очень неясно ..

Как установить различные привязки по-разному в зависимости от ориентации?

1 Ответ

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

Вы можете изменить свое условие, чтобы использовать это свойство isHorizontal, а также вы можете добавить свой собственный код в последнюю версию if. Добавьте этот код на свою главную страницу. 

property bool changeOfWidth: false;
property bool changeOfHeight: false;
property bool newOrientation: false;
property bool isHorizontal: false;

onWidthChanged: {
    changeOfWidth = true; 
    newOrientation = (changeOfWidth && changeOfHeight);
}
onHeightChanged: {
    changeOfHeight = true; 
    newOrientation = (changeOfWidth && changeOfHeight);
}

onNewOrientationChanged: {
    if (newOrientation) {
        changeOfWidth = false;
        changeOfHeight = false;
        isHorizontal = width > height;
        if (isHorizontal) {
            // landscape
            console.log("landscape");
        } else {
            // portrait
            console.log("portrait");
        }
    }
}

Для Qt 5.2 и выше: 

import QtQuick.Window 2.2;

property bool isHorizontal: 
    Screen.primaryOrientation === Qt.LandscapeOrientation ||
    Screen.primaryOrientation === Qt.InvertedLandscapeOrientation;

onIsHorizontalChanged: {
    if (isHorizontal) {
        // landscape
        console.log("landscape");
    } else {
        // portrait
        console.log("portrait");
    }
}
...