Question

当用户双击时，我需要在QML中使Rectangle最大化。为此，我定义了一个Rectangle，其MouseArea包含onDoubleClicked句柄。我的问题是：我需要在此句柄中放置什么才能使矩形与应用程序窗口最大化（不是全屏，最大化）。

Rectangle {
    id: rectangle

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

编辑1：

我添加了两个状态（＆＃34; MINIMIZED＆＃34;和＆＃34; MAXIMIZED＆＃34;）和一个可逆转换。

Answer 1

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

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仅覆盖窗口的一小部分。不Transition和from应用to，以便在Rectangle展开或缩小时应用State。感谢Math.random() s，我们不需要存储以前的坐标，因为当设置回默认状态时，它们的值已恢复。请注意，在以下示例中，我从x和y中删除了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 } } }，以避免每次从“EXPANDED”状态返回时重新评估和分配随机坐标。这是代码：

Rectangle

<强> 2。动画

简单地说，定义一个动画来展开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定义属性更改的默认动画。在这种方法中，我们为所涉及的不同属性（y，width，height和Behavior）定义了一组同类动画。通过这种方式，我们只需要将属性更新为正确的值，将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 } } } }的任务留给动画更改的动画。你可以这样写：

State

到目前为止，第一种方法是 cleaner 解决方案，因为它不涉及临时变量的使用，如第二和第三种。 fs.writeFile("test.js", "var test = 'ey b0ss';\nconsole.log(test);\nif (true) {\nconsole.log('yey');\n}");在组件在它们之间移动时自动保存/恢复变量的状态。

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

2 个答案: