[Learning Log] QT

• Qt quick

An example of the built-in QT creator.

Qt designer is inconvenient to use in windows, so it is easier to use code editor directly. It is very important to like creator because it completes Nb code.

First, create a QT quick project. Put the resource file in the directory where main. qml is located, and then QT creator can automatically identify the resource file.

Set the image first, and then create a rectangle as the border. Here, the background is set to transparent, and the border radius is set to 6 to create a rounded corner effect. Then there are some alignment and other settings.

Place the mouse area under the rectangle (as its subitem, drag it in the designer navigator or add it to the Code Editor) and set layout and onclicked.

Click the icon to see the moving effect.

Then add the state. You can declare a States set and then define each State in it.

In the state, the most important thing is propertchanges, which changes a property of a target. Here is the coordinate of the icon.

Then define the transition. From: And to: can write "*", representing any object. Click numberanimation, and the light bulb will appear later. Click it to display the option panel for the animation path,

You can select various effects.

import QtQuick 2.0Rectangle {    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

 

[Learning Log] QT