最大化矩形以适应应用程序窗口 QML

Question

当用户双击它时，我需要在 QML 中使一个Rectangle 最大化。为此，我定义了一个Rectangle，其中包含MouseArea 和onDoubleClicked 句柄。我的问题是：我需要在这个句柄中添加什么以使 Rectangle 适合应用程序窗口最大化（不是全屏，最大化）。

Rectangle {
    id: rectangle

    MouseArea{
        onDoubleClicked:{
            // TODO HERE
        }
    }
}

编辑 1：

我添加了两个状态（“MINIMIZED”和“MAXIMIZED”）和一个可逆转换。

Answer 1

假设没有在我们的目标 Rectangle 上设置锚定，您有一组选项可以实现您想要的。

1.状态和转换

在这种方法中，您只定义 一个 State：扩展的。另一个State 是默认的，即State，其中Rectangle 仅覆盖窗口的一小部分。 Transition 在没有from 和to 的情况下应用，以便在Rectangle 展开或缩小时都应用它。感谢States，我们不需要存储以前的坐标，因为它们的值在恢复默认状态时恢复。请注意，在以下示例中，我已从 x 和 y 中删除了 Math.random()，以避免每次从“扩展”状态返回时重新评估和分配随机坐标。代码如下：

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    id: win
    title: qsTr("Playground")
    width: 620
    height: 420
    visible: true

    Rectangle {
        id: rect
        width: 20
        height: 20
        color: "black"

        MouseArea {
            anchors.fill: parent

            onDoubleClicked: {
                rect.state = rect.state === "EXPANDED" ? "" : "EXPANDED"
            }
        }

        states: [
            State {
                name: "EXPANDED"
                PropertyChanges { target: rect; x: 0}
                PropertyChanges { target: rect; y: 0}
                PropertyChanges { target: rect; width: parent.width}
                PropertyChanges { target: rect; height: parent.height}
            }
        ]

        transitions: [
            Transition {
                ParallelAnimation {
                    NumberAnimation { target: rect; property: "x"; duration: 350 }
                    NumberAnimation { target: rect; property: "y"; duration: 350 }
                    NumberAnimation { target: rect; property: "width"; duration: 350}
                    NumberAnimation { target: rect; property: "height"; duration: 350}
                }
            }
        ]

        // randomization is applied with JS --> no properties binding
        Component.onCompleted: {
            rect.x = Math.random() * 600
            rect.y = Math.random() * 400
        }
    }
}

2。动画

简单地说，定义一个动画来扩大Rectangle 并缩小它。然后根据位置/大小/其他调用一个或另一个。你可以这样写：

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    id: win
    title: qsTr("Playground")
    width: 620
    height: 420
    visible: true

    Rectangle {
        id: rect
        x: Math.random() * 600
        y: Math.random() * 400
        property int oldx; property int oldy
        width: 20
        height: 20
        color: "black"

        MouseArea {
            anchors.fill: parent

            onDoubleClicked: {
                if(rect.x === 0){
                    shrink.start()
                } else {
                    rect.oldx = rect.x
                    rect.oldy = rect.y
                    expand.start()
                }
            }
        }

        ParallelAnimation {
            id: shrink
            NumberAnimation { target: rect; property: "x"; to: rect.oldx; duration: 350 }
            NumberAnimation { target: rect; property: "y"; to: rect.oldy; duration: 350 }
            NumberAnimation { target: rect; property: "width"; to: 20; duration: 350}
            NumberAnimation { target: rect; property: "height"; to: 20;  duration: 350}
        }

        ParallelAnimation {
            id: expand
            NumberAnimation { target: rect; property: "x"; to: 0; duration: 350 }
            NumberAnimation { target: rect; property: "y"; to: 0; duration: 350 }
            NumberAnimation { target: rect; property: "width"; to: win.width; duration: 350}
            NumberAnimation { target: rect; property: "height"; to: win.height;  duration: 350}
        }
    }
}

3.行为

Behavior 定义属性更改的默认动画。在这种方法中，我们为所涉及的不同属性（x、y、width 和 height）定义了一组同类动画。这样，我们只需要将属性更新为正确的值，将动画更改的任务留给Behaviors。你可以这样写：

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    id: win
    title: qsTr("Playground")
    width: 620
    height: 420
    visible: true

    Rectangle {
        id: rect
        x: Math.random() * 600
        y: Math.random() * 400
        property int oldx; property int oldy
        width: 20
        height: 20
        color: "black"

        MouseArea {
            anchors.fill: parent

            onDoubleClicked: {
                if(rect.x === 0){
                    rect.x = rect.oldx
                    rect.y = rect.oldy
                    rect.width = rect.height = 20
                } else {
                    rect.oldx = rect.x
                    rect.oldy = rect.y
                    rect.x = rect.y = 0
                    rect.width = win.width
                    rect.height = win.height
                }
            }
        }

        Behavior on x {
            NumberAnimation { duration: 450 }
        }
        Behavior on y {
            NumberAnimation { duration: 450 }
        }
        Behavior on width {
            NumberAnimation { duration: 450 }
        }
        Behavior on height {
            NumberAnimation { duration: 450 }
        }
    }
}

到目前为止，第一种方法是所有更清洁 的解决方案，因为它不涉及临时变量的使用，如第二个和第三个。 States 当组件在变量之间移动时自动保存/恢复变量的状态。

Answer 2

更改Rectangle 大小以反映窗口应该足够了：

Rectangle {
    id: rectangle
    MouseArea{
        anchors.fill: parent
        onDoubleClicked:{
            rectangle.width = window.width //assuming your main window id is "window" 
            rectangle.height = window.height
        }
    }
}