最大化矩形以适合应用程序 window QML

Question

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

Rectangle {
    id: rectangle

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

编辑 1：

我添加了两种状态（"MINIMIZED" 和 "MAXIMIZED"）和一种可逆转换。

Answer 1

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

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

Answer 2

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

1.状态和转换

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

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 和一个缩小它。然后根据 position/size/whatever 调用一个或另一个。你可以这样写：

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。行为

A Behavior 定义了属性变化的默认动画。在这种方法中，我们为涉及的不同属性（x、y、width 和 height 定义了一组 homogeneous 动画.通过这种方式，我们只需要将属性更新为正确的值，让 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 }
        }
    }
}

到目前为止，第一种方法是 cleaner 解决方案，因为它不涉及临时变量的使用，如第二种和第三种。 State 自动 save/restore 组件在变量之间移动时的状态。

最大化矩形以适合应用程序 window QML

Maximize Rectangle to fit application window QML

qt

qml