StateELement 中的缩放元素

Question

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

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

但是在这些行中我无法给出缩放属性的具体来源！

我发现 Scale Element

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

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

我希望缩放在该“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（如果您不知道“三元运算”，请查看 此处）。