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

明确指定您希望设置状态的项目的ID，例如：

idOfComponent.state = "default"

所有QML项目和衍生产品都有一个名为state的属性，因此代码需要更具体。

Answer 2

实际上使用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"});

但是我遇到了另一个问题，无论如何在委托中添加到ListView之后更改状态？

我已经尝试过progressModel.set和progressModel.setProperty，但似乎无法正常工作。

Answer 3

状态是qml类型的属性，因此当您分配＆＃34; state＆＃34; to＆＃34; currentState＆＃34;对于＆＃34; ProgressBubble＆＃34;，它取 state 的值，其中＆＃34; ProgressBubble＆＃34;目前在场。

重命名＆＃34;州＆＃34;其他类似于＆＃34; presentState＆＃34;然后试试。

此外，ListView模型的ID（ progressModel_Id ）和用于在不同文件中插入模型元素（ progressModel ）的ID不同，它们都必须引用相同的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"});
    }
}

QML：如何使用状态

3 个答案: