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

本文博客鏈接: http://blog.csdn.net/jdh99 ,作者:jdh,轉載請注明.

參考文檔<<Qt及Qt Quick開發實戰精解.pdf>>

環境：

主機:WIN7

開發環境:Qt

Rectangle元素:

代碼:

    import QtQuick 2.0

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

  

運行效果:

說明:

border屬性設置邊框顏色和寬度

radius設置四角圓角的半徑

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

  

運行效果:

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

  

運行效果:

說明:

focus屬性設置焦點為輸入框.

Flickable元素:

它可以將子元素設置在一個可以拖拽和彈動的界面上,使得子項目的視圖可以滾動.

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

代碼1:

    import QtQuick 2.0

Flickable
{
    id: flick

    width: 300
    height: 200
    //可拖拽內容大小
    contentWidth: image.width
    contentHeight: image.height

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

  

代碼2:

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

圖片可被拖動,用來顯示未顯示的部分.

    import QtQuick 2.0

Rectangle
{
    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.0

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

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

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

    
  

運行效果:

Flipable元素:

可以實現翻轉效果

代碼:

    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
    }

    //旋轉設置,延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
    }
}

  

效果圖:

正面: 背面:

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