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}

如何将此注入上面的state属性，因为我想使用state的“when”属性，

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

或者在指定原点的条件下是否还有其他缩放方式？

感谢您的任何想法。

Answer 1

您应该为id元素设置Scale。然后，您可以在“活动”状态下更改其属性。

这是一个最小的工作示例：

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）。