將qml項目移出窗口左側

Question

我想將qml項目移出應用程序窗口的左側。 這個任務完全適用於窗口的右側通過定義的狀態這樣

states: State { 
    name: "hidden" 
    when: is_hidden == true 

    AnchorChanges { 
     target: right_item_to_move 
     anchors.right: undefined 
    } 

    PropertyChanges { 
     target: right_item_to_move 
     x: main_window.width 
    } 
} 

，並定義適當的過渡，我不能讓它就因爲負主窗口左側的工作x座標是不允許的。 也就是說這是行不通的：

states: State { 
    name: "hidden" 
    when: is_hidden == true 

    AnchorChanges { 
     target: left_item_to_move 
     anchors.left: undefined 
    } 

    PropertyChanges { 
     target: left_item_to_move 
     x: -left_item_to_move.width 
    } 
} 

我該如何實現這個任務？我正在使用Qt 5.8和QtQuick 2.0。

Answer 1

在我看來，應該努力堅持一種定位方式，所以你應該使用anchors或x/y -coordinates。

Here你可以找到一個概述如何做出正確的選擇。

總之：如有疑問，請使用錨。當定位僅相對於父母（靜態）時，使用x和y，並且如果不可能，則以相對於父母不相對的方式進行。

由於您選擇了anchors，在我看來，您應該堅持這一點 - 意思是：改變錨定，以便取代物體的左側錨線，將右側錨線錨定到窗口的左側。

這應該是這樣的：

import QtQuick 2.7 
import QtQuick.Controls 2.0 

ApplicationWindow { 
    id: myWindow 
    visible: true 
    width: 600 
    height: 600 
    color: 'white' 

    Rectangle { 
     anchors.centerIn: parent 
     width: 300 
     height: 600 
     color: 'green' 
     Button { 
      id: but 
      anchors { 
       verticalCenter: parent.verticalCenter 
       left: parent.left 
      } 
      onClicked: { 
       state = (state === 'left' ? '' : 'left') 
      } 

      states: [ 
       State { 
        name: 'left' 
        AnchorChanges { 
         target: but 
         anchors.left: undefined 
         anchors.right: parent.left 
        } 
       } 

      ] 

      transitions: [ 
       Transition { 
        AnchorAnimation { 
         duration: 200 
        } 
       } 
      ] 
     } 
    } 
} 

一個例子，它如何看，如果你選擇修改x值，它可能是這樣的：

import QtQuick 2.7 
import QtQuick.Controls 2.0 

ApplicationWindow { 
    id: myWindow 
    visible: true 
    width: 600 
    height: 600 
    color: 'white' 

    Rectangle { 
     anchors.centerIn: parent 
     width: 300 
     height: 600 
     color: 'green' 
     Button { 
      id: but 
      property bool shown: true 
      anchors { 
       verticalCenter: parent.verticalCenter 
      } 
      onClicked: { 
       shown = !shown 
      } 

      x: (shown ? 0 : -width) 

      Behavior on x { 
       XAnimator { 
        duration: 200 
       } 
      } 
     } 
    } 
}