Qt Quick 布局在不同事件上的变化

Question

当我执行我的 QML 代码时，输出是：

当我最小化 window 时，它变成了

最后，当我再次最大化 window 时，它变为

我想要制作的 GUI 看起来像

![][5]

我不明白在不同事件中 GUI 的所有更改的问题是什么。这是我写的 Qml 代码

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
Window {
    visible: true
    width: 1080
    height: 720
    title: qsTr("Login")
    GridLayout{

          Rectangle{
                    id:one
              Rectangle
              { id:two
                  color:"black";

                  width: 700
                  height:40
              }

              Image {
                  id: image
                  x: 470
                  y: 0
                  width: 54
                  height: 42
                  source: "qrc:/user.png"

              }
              Rectangle
                  {
                      id:three;
                       color:"#f47a42";
                       width: 200
                       height:40
                      anchors.left:two.right;
                     anchors.margins:940
                 Text {

                  id: user
                  text: qsTr("4200")
                  color:"white"
                  anchors.top: value.bottom
              }
              Text
              {
                  id: value;
                  text: qsTr("User");
                  color:"yellow"
              }}
          }
    }

    Rectangle{
        ColumnLayout{
            width: 50
            height: childrenRect.height+fillHeight;

        }
        color:"green"
    }


}

那么为什么会发生这种情况，我该如何解决这个问题？ Output of the code below

Answer 1

这里是可扩展的示例 window:

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Layout example")
    ColumnLayout{
        spacing: 0
        anchors.fill: parent
        Item {
            id: titlebar
            Layout.preferredHeight: 40
            Layout.fillWidth: true
            RowLayout {
                anchors.fill: parent
                spacing: 0
                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "orange"
                    Text {
                        anchors.centerIn: parent
                        text: "Title"
                    }
                }
                Rectangle {
                    Layout.preferredWidth: 100
                    Layout.fillHeight: true
                    color: "lightgreen"
                    Text {
                        anchors.centerIn: parent
                        text: "Actions"
                    }
                }
            }
        }

        Rectangle {
            id:  content
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "lightyellow"
            Text {
                anchors.centerIn: parent
                text: "Content"
            }
        }
    }
}

Qt Quick 布局在不同事件上的变化

Qt Quick layout changes on different events

qt

qml

qt5

qtquick2