Verschieben von qml Artikel aus der linken Seite des Fensters

Question

Ich möchte ein Qml-Element aus der linken Seite des App-Fensters verschieben. Während diese Aufgabe perfekt für die rechte Seite des Fensters funktioniert durch einen Zustand wie diese

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

und definieren Sie die entsprechende Transition definiert, kann ich es nicht, weil negativ auf der linken Seite des Hauptfensters zu arbeiten x Koordinaten sind nicht erlaubt. I.e. das funktioniert nicht:

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

Wie kann ich diese Aufgabe erreichen? Ich benutze Qt 5.8 und QtQuick 2.0.

Answer 1

Meiner Meinung nach sollte man sich bemühen, einer Positionierungsart treu zu bleiben, also sollte man entweder anchors oder x/y -koordinaten verwenden.

Here können Sie eine Übersicht finden, wie Sie die richtige Wahl treffen.

Kurz gesagt: Verwenden Sie im Zweifelsfall Anker. Wenn die Positionierung nur relativ zum Elternteil (statisch) ist, verwenden Sie x und y und wenn nicht möglich, tun Sie dies auch, wenn Sie nicht relativ zum Elternteil sind.

Wie Sie anchors gewählt haben, sollten Sie meiner Meinung nach daran festhalten - also: die Verankerung so ändern, dass anstelle der linken Ankerlinie des Objekts die rechte Ankerlinie an der linken Seite des Fensters verankert wird.

Dies würde wie folgt aussehen:

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

Ein Beispiel, wie es aussehen könnte, wenn Sie den x Wert ändern wählen, könnte es so aussehen:

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