【learning log】Qt

• Qt Quick

　  Qt creator自带的入门 example。

　　Qt designer 在 windows 下用起来还是很不方便，所以基本上直接用 code editor 反而更轻松。喜欢creator很重要一点就是因为它NB的代码补全。

　  首先我们创建一个 qt quick 工程。把资源文件放到 main.qml 所在目录，然后 qt creator 就可以自动识别资源文件。

　  先设置好image， 然后创建矩形，作为边框，这里背景设为透明，边框半径设为6，创造圆角效果。然后是一些对齐之类的设置。

　  把 mouse area 放在 矩形下面（作为其子项， 在 designer 的 navigator 中 拖动 或者 在 code editor 中 添加都行），设置好layout， onClicked。

主要是实现点击图标，出现移动的效果。

　  然后添加 State， 可以先 声明一个 states 集合， 然后在里面定义各个 State。

　  State 里面最主要的就是 PropertChanges， 它改变一个 target 的 某个 property。这里是 icon 的坐标。

　　然后定义 Transition。from：和 to：的对象可以写 ”*“， 代表任意对象。左键点击 NumberAnimation，等待一会会出现”小灯泡“。点它，出现对动画路径的选项面板，

　　可以选择各种效果。

import QtQuick 2.0

Rectangle {
    id: page
    width: 360
    height: 360
    color: "#333333"

    Rectangle {
        id: topLeftRect
        x: 10
        y: 20
        width: 64
        height: 64
        color: "#00000000"
        radius: 6
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 20
        border.width: 1
        border.color: "#808080"

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                page.state = ‘ ‘
        }
    }
    }

    Image {
        id: icon
        x: 10
        y: 20
        source: "states.png"
    }

    Rectangle {
        id: middleRightRect
        width: 64
        height: 64
        color: "#00000000"
        radius: 6
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 10
        transformOrigin: Item.Center
        border.width: 1
        border.color: "#808080"
        MouseArea {
            id: mouseArea1
            anchors.fill: parent
            onClicked: page.state = ‘State1‘
        }
    }

    Rectangle {
        id: bottomLeftRect
        x: 6
        y: 28
        width: 64
        height: 64
        color: "#00000000"
        radius: 6
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        border.width: 1
        MouseArea {
            id: mouseArea2
            anchors.fill: parent
            onClicked: page.state = ‘State2‘
        }
        border.color: "#808080"
    }
    states {
        State {
            name: "State1"
            PropertyChanges {
                target: icon
                x: middleRightRect.x
                y: middleRightRect.y
            }
        }
        State {
            name: "State2"
            PropertyChanges {
                target: icon
                x: bottomLeftRect.x
                y: bottomLeftRect.y
            }
        }
    }
    transitions {
        Transition {
            from: "*"
            to: "State1"
            NumberAnimation {
                easing.type: Easing.OutBounce
                properties: "x,y";
                duration: 1000
            }
        }
        Transition {
            from: "*"
            to: "State2"
            NumberAnimation {
                properties: "x, y"
                easing.type: Easing.InOutQuad
                duration: 2000
            }
        }
        Transition {
            NumberAnimation {
                properties: "x, y"
                duration: 2000
            }
        }
    }
}

main.qml