QML：状態を使用して前の設定された位置からオブジェクトを移動する方法

Question

特定の状態が設定されるたびに、以前に設定した位置から移動したいオブジェクトがあります。私はxPosと呼ばれる別のプロパティを作成しようとしましたが、バインディングループエラーを回避しようとしました。このエラーは、状態が設定された後にオブジェクトの新しい位置xによって設定され、次にその特定の状態に再び切り替えることができるように同じ状態を呼び出すことは何もしませんが、それはうまくいかないようです。ここで

は、私のコードの抜粋です：

property int xPos: 0 

states: [                  
    State { 
     name: "nextStep" 
     PropertyChanges { 
      target: progressBar_Id 
      x: -1*(progressBar_Id.step.width) + xPos 
     } 
    }, 
    State { 
     name: "previousStep" 
     PropertyChanges { 
      target: progressBar_Id 
      x: progressBar_Id.step.width + xPos 
     } 
    }, 
    State { 
     name: "default" 
     PropertyChanges { 
      target: progressBar_Id 
      x: xPos 
     } 
    } 
] 

transitions: [ 
    Transition { 
     from: "*" 
     to: "nextStep" 
     NumberAnimation {properties: "x"; easing.type: Easing.Linear; duration: 1000} 
     onRunningChanged: { 
      if(!running) { 
       xPos = progressBar_Id.x; 
       console.info("xPos = " + xPos); 
       state = "default"; 
      } 
     } 
    }, 
    Transition { 
     from: "*" 
     to: "previousStep" 
     NumberAnimation {properties: "x"; easing.type: Easing.Linear; duration: 1000} 
     onRunningChanged: { 
      if(!running) { 
       xPos = progressBar_Id.x; 
       console.info("xPos = " + xPos); 
       state = "default"; 
      } 
     } 
    } 
] 

XPOSは、コンソール出力から最初の時間を設定し得るように見えるが、決してオブジェクトに新しいのxCoordが適用されます。

Answer 1

実際には、ListViewを使用してはるかに優れた代替案が出ました。

ListView { 
    id: listView_Id 
    width: contentWidth 
    height: bubbleSize 
    anchors.centerIn: parent 
    layoutDirection: Qt.RightToLeft 
    orientation: ListView.Horizontal 
    spacing: 0 

    delegate: Item { 
     width: bubbleSize 
     height: width 

     ProgressBubble { 
      stateText: stateNumber 
      currentState: state 
     } 
    } 
    model: ListModel { id: progressModel_Id } 
} 

別のQMLファイル：

progressModel.insert(0, {stateNumber: number++, state: "current"}); 

しかし、私は別の問題に遭遇し、それがリストビューに追加されています後、デリゲート内の状態を変更するには、とにかくはありますか？

私は既にprogressModel.setとprogressModel.setPropertyを試しましたが、うまくいかないようです。

Answer 2

明示的に例えば、あなたが状態を設定したい上のアイテムのIDを指定します。

idOfComponent.state = "default" 

コードをより具体的にする必要があるので、すべてのQMLのアイテムと誘導体は、stateと呼ばれる性質を持っています。

Answer 3

状態はQMLの種類のプロパティですので、あなたは、「状態」を「ProgressBubble」の「currentStateの」に代入されている場合、そのは「ProgressBubble」は、現在存在する状態の値をとります。

"state"の名前を "presentState"のように変更してから、試してみてください。

また、リストビューモデル（progressModel_Id）のIDと異なるファイルにモデル要素（progressModel）を挿入するために使用されるもの、それらの両方が同じIDを参照する必要があり、異なっています。

これらの変更後、モデルのプロパティを設定できます。サンプルコードスニペット：

import QtQuick 2.0 

Rectangle { 
    id: root 
    width: 360 
    height: 360 

    property int number: 1 

    ListView { 
     id: listView_Id 
     width: 100 //contentWidth // this creates property binding issue 
     height: 100 // bubbleSize // I was not sure about this value 
     anchors.centerIn: parent 
     layoutDirection: Qt.RightToLeft 
     orientation: ListView.Horizontal 
     spacing: 0 
     delegate: Item { 
      width: 100 // bubbleSize // I was not sure about this value 
      height: width 
      ProgressBubble { 
       state: "default" 
       stateText: stateNumber 
       currentState: presentState 

       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         progressModel_Id.set(index,{stateNumber: stateNumber, presentState: "not current"}) 
        } 
       } 
      } 
     } 
     model: ListModel { id: progressModel_Id } 
    } 
    Component.onCompleted: 
    { 
     progressModel_Id.insert(0, {stateNumber: number++, presentState: "current"}); 
    } 
}