最大化矩形以適應應用程序窗口QML

Question

當用戶雙擊它時，我需要使QML中的一個Rectangle最大化。爲此，我定義了一個Rectangle，其中包含MouseArea和onDoubleClicked句柄。我的問題是：我需要把這個句柄放在最大化的應用程序窗口中（不是全屏，最大化）。

Rectangle { 
    id: rectangle 

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

EDIT 1：

我已經添加了兩個狀態（ 「MINIMIZED」 和 「MAXIMIZED」）和一個可逆轉變。

Answer 1

假設沒有固定設置在我們的目標Rectangle，你有一組選項來實現你想要的。

1.各國和轉換

在這種方法中，你只需定義一個State：擴展的一個。其他State是默認值，即State，其中Rectangle只覆蓋窗口的一小部分。 A Transition適用於無from和to，因此在Rectangle展開或縮小時應用它。由於State s，我們不需要存儲以前的座標，因爲它們的值是恢復時當默認狀態設置回。請注意，在下面的示例中，我從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和一個萎縮下來。然後根據位置/大小/其他調用一個或另一個。你可以寫這樣的事情：

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）。通過這種方式，我們只需要將屬性更新爲正確的值，然後在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 s隨着組件在它們之間移動，自動保存/恢復變量的狀態。

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 
     } 
    } 
}