QML learning: Rectangle, Text, TextEdit, Flickable, Flipable Elements

import QtQuick 2.0Item{    Rectangle    {        color: "blue"        width: 50        height: 50        border.color: "green"        border.width: 10        radius: 20    }}

Running effect:

Import QtQuick 2.0 Item {Rectangle {color: "blue" width: 50 height: 50 border. color: "green" border. width: 10 radius: 20} Text {// text Text: "Hello JDH! "// Font. family:" Helvetica "// font. pointSize: 24 // color:" red "}}

Running effect:

Import QtQuick 2.0 Item {Rectangle {color: "blue" width: 50 height: 50 border. color: "green" border. width: 10 radius: 20} Text {// text Text: "Hello JDH! "// Font. family: "Helvetica" // font. pointSize: 24 // color: "red"} TextEdit {width: 240 text: "This is TextEdit" font. pointSize: 10 focus: true x: 20 y: 40 }}

Running effect:

Import QtQuick 2.0 Flickable {id: flick width: 300 height: 200 // The content size contentWidth: image. width contentHeight: image. height Image {id: image source: "pics/1.jpg "}}

Code 2:

Import QtQuick 2.0 Rectangle {width: 480 height: 320 color: "blue" Flickable {id: flick width: 300 height: 200 // the size of the content that can be dragged contentWidth: image. width contentHeight: image. height // hide the clip: true; Image {id: image source: "pics/1.jpg"} That is greater than the display window "}}}

Running effect:

Code 3:

Running effect:

Import QtQuick 2.0 Flipable {id: flip width: 300 height: 200 // define property bool flipped: false // front Image front: Image {source: "pics/1.jpg" anchors. centerIn: parent} // back Image back: Image {source: "pics/2.jpg" anchors. centerIn: parent} // Rotation settings, extended Y axis rotation transform: Rotation {id: rotation origin. x: flip. width/2 origin. y: flip. height/2 axis. x: 0 axis. y: 1 axis. z: 0 angle: 0} // status change states: State {name: "B Ack "PropertyChanges {target: rotation; angle: 180} when: flip. flipped} // conversion method transitions: Transition {NumberAnimation {target: rotation properties: "angle" duration: 4000 }}// MouseArea {anchors in the mouse area. fill: parent onClicked: flip. flipped =! Flip. flipped }}

: