如何在QML + JS中为水平和垂直方向设置不同的锚点

Question

我有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函数，但它开始看起来非常不清楚..

如何以不同的方式设置不同的锚点取决于方向？

Answer 1

您可以更改条件以使用此“isHorizo​​ntal”属性，也可以将自己的代码添加到最新的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");
    }
}