QML學(xué)習(xí):Rectangle,Text,TextEdit,Flickable,Flipable元素

本文博客鏈接: http://blog.csdn.net/jdh99 ,作者:jdh,轉(zhuǎn)載請(qǐng)注明.

參考文檔<<Qt及Qt Quick開發(fā)實(shí)戰(zhàn)精解.pdf>>

環(huán)境：

主機(jī):WIN7

開發(fā)環(huán)境:Qt

Rectangle元素:

代碼:

    import QtQuick 2.0

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

  

運(yùn)行效果:

說明:

border屬性設(shè)置邊框顏色和寬度

radius設(shè)置四角圓角的半徑

Text元素:

代碼:

    import QtQuick 2.0

Item
{
    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"
    }
}

  

運(yùn)行效果:

TextEdit元素:

代碼:

    import QtQuick 2.0

Item
{
    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
    }
}

  

運(yùn)行效果:

說明:

focus屬性設(shè)置焦點(diǎn)為輸入框.

Flickable元素:

它可以將子元素設(shè)置在一個(gè)可以拖拽和彈動(dòng)的界面上,使得子項(xiàng)目的視圖可以滾動(dòng).

比如一張大圖片,窗口顯示不全,則可以用拖動(dòng)它查看不同的部分.

代碼1:

    import QtQuick 2.0

Flickable
{
    id: flick

    width: 300
    height: 200
    //可拖拽內(nèi)容大小
    contentWidth: image.width
    contentHeight: image.height

    Image
    {
        id: image
        source: "pics/1.jpg"
    }
}

  

代碼2:

利用clip屬性,將大于Flickable窗口的部分隱藏.

圖片可被拖動(dòng),用來顯示未顯示的部分.

    import QtQuick 2.0

Rectangle
{
    width: 480
    height: 320
    color: "blue"

    Flickable
    {
        id: flick

        width: 300
        height: 200
        //可拖拽內(nèi)容大小
        contentWidth: image.width
        contentHeight: image.height
        //隱藏大于顯示窗口的部分
        clip: true;

        Image
        {
            id: image
            source: "pics/1.jpg"
        }
    }
}

  

運(yùn)行效果:

代碼3:

實(shí)現(xiàn)滾動(dòng)條功能:

    
      import QtQuick 2.0

Rectangle
{
    width: 480
    height: 320
    color: "blue"

    Flickable
    {
        id: flick

        width: 300
        height: 200
        //可拖拽內(nèi)容大小
        contentWidth: image.width
        contentHeight: image.height
        //隱藏大于顯示窗口的部分
        clip: true;

        Image
        {
            id: image
            source: "pics/1.jpg"
        }
    }

    //豎滾動(dòng)條
    Rectangle
    {
        id: scrollbar_vertical
        anchors.right: flick.right
        //當(dāng)前可視區(qū)域的位置.為百分比值,0-1之間
        y: flick.visibleArea.yPosition * flick.height
        width: 10
        //當(dāng)前可視區(qū)域的高度比例,為百分比值,0-1之間
        height: flick.visibleArea.heightRatio * flick.height
        color: "black"
    }

    //橫滾動(dòng)條
    Rectangle
    {
        id: scrollbar_horizontal
        anchors.bottom: flick.bottom
        //當(dāng)前可視區(qū)域的位置.為百分比值,0-1之間
        x: flick.visibleArea.xPosition * flick.width
        height: 10
        //當(dāng)前可視區(qū)域的寬度比例,為百分比值,0-1之間
        width: flick.visibleArea.widthRatio * flick.width
        color: "black"
    }
}

    
  

運(yùn)行效果:

Flipable元素:

可以實(shí)現(xiàn)翻轉(zhuǎn)效果

代碼:

    import QtQuick 2.0

Flipable
{
    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
    }

    //旋轉(zhuǎn)設(shè)置,延Y軸旋轉(zhuǎn)
    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
    }

    //狀態(tài)改變
    states:State
    {
        name: "back"
        PropertyChanges
        {
            target: rotation;angle:180
        }
        when:flip.flipped
    }

    //轉(zhuǎn)換方式
    transitions: Transition
    {
        NumberAnimation
        {
            target:rotation
            properties: "angle"
            duration:4000
        }
    }

    //鼠標(biāo)區(qū)域
    MouseArea
    {
        anchors.fill: parent
        onClicked: flip.flipped = !flip.flipped
    }
}

  

效果圖:

正面: 背面:

QML學(xué)習(xí):Rectangle,Text,TextEdit,Flickable,Flipable元素