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