QML 简单hello word 实现简单 变换字体颜色，和旋转动画

例子出在Qt_Quick中文手册

import QtQuick 1.1

Rectangle {
    id: page
    width: 500
    height: 200
    color: "lightgray"
    Text {
        id: helloText
        text: qsTr("Hello World")
        y: 30                                                //文本从它父级顶部垂直30像素位置
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24;font.bold: true

    }

    MouseArea{
        id: mouseArea
        anchors.fill: parent
    }
    
    //首先我们对文本元素创建名为down的状态。当MouseArea被按下时，这个状态将被激活；当鼠标键释放时，将处于非激活状态。
    states:State {
        name: "down"; when:mouseArea.pressed == true
        PropertyChanges {
            target: helloText
            y: 160
            rotation: 180
            color: "red"
        }

    }
    /*
    因为我们不希望文本运动时出现不平滑的现象，这里在两个状态之间添加一个过渡。
    from与to定义两状态间的变换。在这里是从默认状态到down状态的变换。
    因为我们需要从down状态返回到默认状态有同样的变换，还需要设置reversible为ture。这等于分
    别写了两种变换。
    ParallelAnimation元素确保动画的两种类型（数值与颜色的变化）同时开始。我们同样可以使用
    SequentialAnimation来替代，它是序列进行的，当一个动画完成后，再接着另一个动画。\
      */
    transitions: Transition {
        from: ""; to: "down"
        reversible: true
        ParallelAnimation{
            NumberAnimation{properties: "y, rotation"; duration: 500; easing.type: Easing.InOutQuad}
            ColorAnimation{duration: 500}
        }

    }

    //网格选择颜色区， 每个Cell是个单元格， Cell为自定义的组件
    Grid{
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        Cell{cellColor: "red"; onClicked: helloText.color = cellColor}
        Cell{cellColor: "green"; onClicked: helloText.color = cellColor}
        Cell{cellColor: "blue"; onClicked: helloText.color = cellColor}
        Cell{cellColor: "yellow"; onClicked: helloText.color = cellColor}
        Cell{cellColor: "steelblue"; onClicked: helloText.color = cellColor}
        Cell{cellColor: "black"; onClicked: helloText.color = cellColor}
    }

}

上面用的Cell就是自定的组件 Cell.qml
Cell.qml

import QtQuick 1.1

Item{
    id: container 
    //声明一个cellColor属性， 这个属性是从我们组件外访问，允许我们使用不同的颜色来实例化单元格。该属性只是对现存的属性使用了一个别名。
    property alias cellColor: rectangle.color   
    signal clicked(color cellColor)

    width: 40; height: 25

    Rectangle{
        id:rectangle
        border.color: "white"
        anchors.fill: parent
    }

    MouseArea{
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)  //这个 clicked 就是上 上面的信号方法 
    }
}