qml - StateELement 中的比例元素

Question

我可以在下面写几行并让它工作:

states: State {
name: "active"; when:myitem.activeFocus;
                                            PropertyChanges { target: myitem; z:1000; scale: 1.2 }
                                            }
                                            transitions: Transition {
                                            NumberAnimation { properties: scale; duration: 1000 }
}

但在这些行中我无法给出比例属性的具体来源!

我找到了比例元素

transform: Scale { origin.x: 25; origin.y: 25; xScale: 3}

我如何将它注入(inject)到上面的状态属性中，因为我想使用状态的“when”属性，

我希望缩放在“何时”条件下运行。

或者是否有任何其他方法可以在指定原点的情况下进行缩放？

谢谢你的想法。

Answer 1

您应该为 Scale 元素设置一个 id。然后您可以在“事件”状态下更改其属性。

这里是一个最小的工作示例:

import QtQuick 1.0

Item {
    height: 200; width: 500

    Rectangle {
        id: myitem

        height: 10; width: 100
        anchors.centerIn: parent
        color: "blue"

        transform: Scale { id: scaleTransform; origin.x: 25; origin.y: 25 }

        states: State {
            name: "active"; when: mouseArea.pressed
            PropertyChanges { target: scaleTransform; xScale: 3 }
        }
        transitions: Transition {
            NumberAnimation { property: "xScale"; duration: 1000 }
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
}

另一种没有状态的可能性是:

import QtQuick 1.0

Item {
    height: 200; width: 500

    Rectangle {
        id: myitem

        height: 10; width: 100
        anchors.centerIn: parent
        color: "blue"

        transform: Scale {
            id: scaleTransform
            origin.x: 25; origin.y: 25
            xScale: mouseArea.pressed ? 3 : 1  // <-

            Behavior on xScale {  // for animation
                NumberAnimation { duration: 1000 }
            }
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
}

xScale 在按下鼠标时设置为 3，否则设置为 1(如果您不知道“三元运算”，请查看 here)。