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

Posted 2023-02-16

【中文标题】最大化矩形以适应应用程序窗口 QML

【英文标题】：Maximize Rectangle to fit application window QML

【发布时间】：2015-05-26 14:08:41

【问题描述】：

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

Rectangle 
    id: rectangle

    MouseArea
        onDoubleClicked:
            // TODO HERE
        
    

编辑 1：

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

【问题讨论】：

这将取决于矩形的定位方式。换句话说，您是使用坐标和尺寸，还是使用锚点？

【参考方案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 当组件在变量之间移动时自动保存/恢复变量的状态。

【参考方案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
        
    

【讨论】：

只有在rectangle 位于窗口坐标中的位置 0,0 时才有效。

反正很容易适应，因为 OP 没有说清楚它的位置。