QML學習:Rectangle,Text,TextEdit,Flickable,Flipable元素

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

運行效果:

import QtQuick 2.0Item{    Rectangle    {        color: "blue"        width: 50        height: 50        border.color: "green"        border.width: 10        radius: 20    }    Text    {        //文本        text: "Hello JDH!"        //字型        font.family: "Helvetica"        //字大小        font.pointSize: 24        //顏色        color: "red"    }}

運行效果:

import QtQuick 2.0Item{    Rectangle    {        color: "blue"        width: 50        height: 50        border.color: "green"        border.width: 10        radius: 20    }    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    }}

運行效果:

import QtQuick 2.0Flickable{    id: flick    width: 300    height: 200    //可拖拽內容大小    contentWidth: image.width    contentHeight: image.height    Image    {        id: image        source: "pics/1.jpg"    }}

代碼2:

import QtQuick 2.0Rectangle{    width: 480    height: 320    color: "blue"    Flickable    {        id: flick        width: 300        height: 200        //可拖拽內容大小        contentWidth: image.width        contentHeight: image.height        //隱藏大於顯示視窗的部分        clip: true;        Image        {            id: image            source: "pics/1.jpg"        }    }}

運行效果:

代碼3:

運行效果:

import QtQuick 2.0Flipable{    id: flip    width: 300    height: 200    //定義屬性    property bool flipped: false    //正面圖片    front:Image    {        source: "pics/1.jpg"        anchors.centerIn: parent    }    //背面圖片    back:Image    {        source: "pics/2.jpg"        anchors.centerIn: parent    }    //旋轉設定,延Y軸旋轉    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    }    //狀態改變    states:State    {        name: "back"        PropertyChanges        {            target: rotation;angle:180        }        when:flip.flipped    }    //轉換方式    transitions: Transition    {        NumberAnimation        {            target:rotation            properties: "angle"            duration:4000        }    }    //滑鼠地區    MouseArea    {        anchors.fill: parent        onClicked: flip.flipped = !flip.flipped    }}

: