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

例子出在Qt_Quick中文手册

import QtQuick 1.1Rectangle {    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.1Item{    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 就是上 上面的信号方法     }}