Центрирование группы виджетов QML без изменения их относительного выравнивания

Question

Короткая версия

Я бы хотел расположить по горизонтали и / или по вертикали центральные группы виджетов QML без необходимости выравнивать их в структурированном макете.

Длинная версия

Я сделал следующий дизайн:

Мой код QML до сих пор выглядит следующим образом. (Я знаю, что жестко запрограммированные координаты X / Y неаккуратны, это всего лишь макет.)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Shapes 1.11
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0

Window {
    id: window
    visible: true
    width: 640
    height: 480
    color: "#f0eded"
    title: qsTr("Hello World")

    Image {
        id: image
        x: 215
        y: 96
        sourceSize.height: 210
        sourceSize.width: 210
        source: "lock.svg"
    }

    Text {
        id: element
        y: 364
        anchors.horizontalCenter: parent.horizontalCenter
        color: "#646464"
        text: qsTr("Unlock your rclone configuration to continue.")
        anchors.horizontalCenterOffset: 0
        styleColor: "#00000000"
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 12
    }

    TextField {
        id: txtPassword
        x: 193
        y: 312
        focus: true
        font.pointSize: 22
        horizontalAlignment: Text.AlignHCenter
        echoMode: TextInput.Password
    }

    Button {
        id: btnContinue
        x: 399
        y: 312
        width: txtPassword.height
        height: txtPassword.height
        text: qsTr("»")
        background: Rectangle {
            border.color: btnContinueMouse.containsMouse ? "#cdcdcd" : "#ccc"
            color: btnContinueMouse.containsMouse ? "#eee" : "#ddd"
        }

        MouseArea {
           id: btnContinueMouse
           anchors.fill: parent
           hoverEnabled: true
        }
    }
}

Что я хотел бы сделать, так это центрировать эту группу виджетов по горизонтали и вертикали так, чтобы ее выравнивание по-прежнему создавалось смысл, если пользователь увеличивает размер окна. Я знаю, что для таких целей я могу помещать виджеты в макет строки / столбца / сетки, но тогда я теряю большой контроль над пространством между виджетами.

Какой подход вы бы порекомендовали сделать из этого макета чистым? QML-код, оставаясь верным оригинальному дизайну?

Answer 1

Двумя способами:

Оберните его в элемент, затем

Используйте привязки, чтобы расположить ваш контент относительно экрана следующим образом:

Item {
        anchors.fill: parent
    Image {
        id: image

        anchors.left: parent.left
        anchors.right: parent.right
        sourceSize.height: 210
        sourceSize.width: 210
        source: "lock.svg"
    }

    Text {
        id: element
        anchors.top:  txtPassword.bottom
        anchors.left: txtPassword.left
        anchors.right: btnContinue.right



        color: "#646464"
        text: qsTr("Unlock your rclone configuration to continue.")

        styleColor: "#00000000"
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 12
    }

---

ИЛИ

Создайте отдельные компоненты из разных частей, затем поместите их как одно целое в макет. Сделайте это, переместив ваши элементы в отдельный файл, а затем ссылаясь на этот файл, используя его имя:

пример:

LockElement  { anchors.centerIn: parent }

загрузит LockElement.qml, в котором будут ваши Item, Image, TextBox et c все в одном файле.

Это создаст координаты относительно их собственного координатного пространства.

LockElement.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Shapes 1.11
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0

 Item {

   width: 640
   height: 480


    Image {
        id: image
        x: 215
        y: 96
        sourceSize.height: 210
        sourceSize.width: 210
        source: "lock.svg"
    }

    Text {
        id: element
        y: 364
        anchors.horizontalCenter: parent.horizontalCenter
        color: "#646464"
        text: qsTr("Unlock your rclone configuration to continue.")
        anchors.horizontalCenterOffset: 0
        styleColor: "#00000000"
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 12
    }

    TextField {
        id: txtPassword
        x: 193
        y: 312
        focus: true
        font.pointSize: 22
        horizontalAlignment: Text.AlignHCenter
        echoMode: TextInput.Password
    }

    Button {
        id: btnContinue
        x: 399
        y: 312
        width: txtPassword.height
        height: txtPassword.height
        text: qsTr("»")
        background: Rectangle {
            border.color: btnContinueMouse.containsMouse ? "#cdcdcd" : "#ccc"
            color: btnContinueMouse.containsMouse ? "#eee" : "#ddd"
        }

        MouseArea {
           id: btnContinueMouse
           anchors.fill: parent
           hoverEnabled: true
        }
    }
}
 // etc..

---