QT開發（五十三）———QML基本元素

時間 2019-11-05

標籤開發五十三 qml 基本元素简体版

原文原文鏈接

QT開發（五十三）———QML基本元素

1、基本可視化項

可視元素具備幾何座標，會在屏幕上佔據一塊顯示區域。javascript

Item 基本的項元素，全部可視化項都繼承Itemphp

Rectangle 基本的可視化矩形元素java

Gradient 定義一個兩種顏色的漸變過程web

GradientStop 定義個顏色，被Gradient使用正則表達式

Image 在場景中使用位圖算法

BorderImage (特殊的項) 定義一張圖片並當作邊界spring

AnimatedImage 爲播放動畫存儲一系列的幀canvas

Text 在場景中使用文本數組

TextInput 顯示可編輯爲文本網絡

IntValidatorint 驗證器

DoubleValidator double 驗證器

RegExpValidator 驗證字符串正則表達式

TextEdit 顯示多行可編輯文本

1、Item

Item是全部可視元素中最基本的一個，是全部其它可視元素的父元素，全部其它可視元素都繼承Item。Item自己沒有任何繪製，做用是定義全部可視元素的通用屬性。

分組	屬性
幾何	x和y用於定義元素左上角的座標，width和height則定義了元素的範圍。z定義了元素上下的層疊關係。
佈局	anchors（具備 left、right、top、bottom、vertical 和 horizontal center 等屬性）用於定位元素相對於其它元素的margins的位置。
鍵盤處理	Key和KeyNavigation屬性用於控制鍵盤；focus屬性則用於啓用鍵盤處理，也就是獲取焦點。
變形	提供scale和rotate變形以及更通常的針對 x、y、z 座標值變換以及transformOrigin點的transform屬性列表。
可視化	opacity屬性用於控制透明度；visible屬性用於控制顯示/隱藏元素；clip屬性用於剪切元素；smooth屬性用於加強渲染質量。
狀態定義	提供一個由狀態組成的列表states和當前狀態state屬性；同時還有一個transitions列表，用於設置狀態切換時的動畫效果。

除了定義通用屬性，Item另一個重要做用是做爲其它可視元素的容器。

2、Rectangle

Rectangle繼承了Item，並在Item的基礎之上增長了填充色屬性、邊框相關的屬性。爲了定義圓角矩形，Rectangle還有一個radius屬性。下面的代碼定義了一個寬150像素、高100像素，淺金屬藍填充，紅色4像素的邊框的矩形。

Rectangle
{
    id: rect
    width: 150
    height: 100
    color: "lightsteelblue"
    border
    {
        color: "#FF0000"
        width: 4
    }
    radius: 8
}

QML中的顏色值可使用顏色名字，也可使用#十六進制的形式。

Rectangle除了color屬性外，還有一個gradient屬性，用於定義使用漸變色填充。

Rectangle
{
    width: 150
    height: 100
    gradient: Gradient
    {
        GradientStop { position: 0.0; color: "red" }
        GradientStop { position: 0.33; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
    border.color: "slategray"
}

gradient要求一個Gradient對象，Gradient對象須要一個GradientStop的列表。所謂漸變，就是指定在某個位置必須是某種顏色，中間的過渡色則由計算而得。 GradientStop對象就是用於指定某個位置的顏色，須要兩個屬性：position和color。前者是一個 0.0 到 1.0 的浮點數，說明y軸方向的位置，例如元素的最頂部是0.0，最底部是1.0，介於最頂和最底之間的位置能夠用一個浮點數表示，也就是一個比例；後者是position位置的顏色值。GradientStop { position: 0.33; color: "yellow" }說明在從上往下三分之一處是×××。

Rectangle必須同時指定（顯式地或隱式地）寬和高，不然不能在屏幕上顯示出來。

3、Text

Text元素最重要的屬性固然就是text屬性。這個屬性類型是string。Text元素會根據文本和字體計算本身的初始寬度和高度。字體則能夠經過字體屬性組設置（例如font.family、font.pixelSize等）。若是要設置文本顏色，只須要設置color屬性。

Text元素中的文本可使用horizontalAlignment和verticalAlignment屬性指定對齊方式。爲了進一步加強文本渲染，可使用style和styleColor兩個屬性。這兩個屬性容許咱們指定文本的顯示樣式和樣式的顏色。對於較長的文本，一般會選擇在文本末尾使用 … ，elide屬性容許指定 … 的顯示位置。經過wrapMode屬性能夠指定換行模式。

Text
{
    width: 160
    height: 100
    text: "A very very long text"
    elide: Text.ElideRight
    style: Text.Sunken
    styleColor: '#FF4444'
    verticalAlignment: Text.AlignTop
    font
    {
        pixelSize: 24
    }
}

Text元素的文本省略號位置在一行文本的右側；具備一個#FF4444顏色的樣式Sunken。Text元素的做用是顯示文本，不會顯示文本的任何背景。

4、Image

Image元素則用於顯示圖像。QML支持的圖像格式有PNG、JPG、GIF 和 BMP 等。能夠直接給source屬性一個URL來自動從網絡加載圖片，能夠經過fillMode屬性設置改變大小的行爲。

URL能夠是本地路徑，能夠是網絡路徑。若是一個URL是網絡的，QML 會自動從URL網絡地址加載對應的資源。

Image
{
    x: 0;
    y: 0
    width: 97
    height: 120
    source: "http://ucenter.51cto.com/avatar.php?uid=9281927&size=middle"
    fillMode: Image.PreserveAspectCrop
    clip: true
}

Image.PreserveAspectCrop是等比例切割，須要同時設置clip屬性，避免所要渲染的對象超出元素範圍。

5、TextInput

TextInput是單行的文本輸入框，支持驗證器、輸入掩碼和顯示模式等

import QtQuick 2.0
 
Rectangle {
    width: 200
    height: 80
    color: "blue"
 
    TextInput
    {
        id: input1
        x: 8; y: 8
        width: 96; height: 20
        focus: true
        text: "Text Input 1"
        KeyNavigation.tab: input2
    }
    TextInput
    {
        id: input2
        x: 8; y: 36
        width: 96; height: 20
        text: "Text Input 2"
        KeyNavigation.tab: input1
    }
}

有兩個TextInput，用戶能夠經過點擊輸入框改變焦點。若是想支持鍵盤導航，能夠添加KeyNavigation附加屬性。KeyNavigation是一個附加屬性。當用戶點擊了指定的按鍵時，屬性指定的組件就會得到焦點。普通的屬性隸屬於類型；附加屬性通常用於修飾或補充目標類型。KeyNavigation.tab並非TextInput的普通屬性，是用來講明TextInput的一種特徵。附加屬性的通常語法是類型.屬性名，類型就是KeyNavigation，屬性名就是tab。

6、TextEdit

TextEdit是多行的文本編輯組件

import QtQuick 2.0
 
Rectangle {
    width: 200
    height: 80
    color: "blue"
 
    TextEdit
    {
        id: edit1
        x: 8; y: 8
        width: 96; height: 20
        focus: true
        text: "Text Edit 1"
        KeyNavigation.tab: edit2
    }
    TextEdit
    {
        id: edit2
        x: 8; y: 36
        width: 96; height: 20
        text: "Text Edit 2"
        KeyNavigation.tab: edit1
    }
}

七、IntValidator

int 型驗證器，和輸入框結合後就是隻能輸入整型數據。

import QtQuick 2.0
 
TextInput
{
    IntValidator{id: intval; bottom: 10; top: 100;}
    width: 100; height: 20;
    text: "";
    validator: intval;
}

8、BorderImage

BorderImage將一張圖片分爲9部分，當圖片進行縮放的時候

A．1 3 7 9位置的都不會進行縮放

B. 2 8將根據屬性horzontalTileMode 進行縮放

C．4 6 將根據屬性verticalTileMode 進行縮放

D．5 將根據屬性horzontalTileMode 和 verticalTileMode 進行縮放

import QtQuick 2.0
 
BorderImage 
{
    width: 180; height: 180
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "http://ucenter.51cto.com/avatar.php?uid=9281927&size=middle"
}

9、DoubleValidator

DoubleValidator 只能輸入浮點數

TextInput
{
    DoubleValidator
    {
        id: intval
        decimals: 4
        bottom: 10
        top: 100
        notation: DoubleValidator.StandardNotation
    }
    width: 100; height: 20;
    text: "";
    validator: intval;
}

10、RegExpValidator

RegExpValidator使用正則表達式

TextInput
{
    // 使用一個正則表達式來控制輸入的字符串
    // /^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/ 表示 開始位置必須是一個大寫或小寫字母
    // 接下來是0~2個的數字並且是0或1，在接下來是1~3個的小寫字母
    RegExpValidator{id: intval; regExp:/^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/;}
    width: 100; height: 20;
    text: "";
    validator: intval;
}

11、AnimatedImage

AnimatedImage 主要用於播放gif圖片

import QtQuick 2.0
 
Rectangle
{
    width: animation.width; height: animation.height + 8
    AnimatedImage
    {
        id: animation
        source: "animation.gif"
    }
    Rectangle
    {
        property int frames: animation.frameCount
        width: 4; height: 8
        x: (animation.width - width) * animation.currentFrame / frames
        y: animation.height
        color: "red"
    }
}

2、基本的交互項

不可視元素（例如Timer）一般提供一種做用於可視元素的功能。

MouseArea 鼠標句柄交互

FocusScope 鍵盤焦點句柄

Flickable 提供一種瀏覽整張圖片的一部分的效果

Flipable提供一個平面，能夠進行翻轉看前面或後面

1、MouseArea

MouseArea用於用戶交互，是一個不可見的矩形區域，用於捕獲鼠標事件。一般會將MouseArea元素與一個可視元素結合起來使用，以即可視元素可以與用戶交互。

Rectangle
{
    id: rect
    x: 0;
    y: 0
    width: 150;
    height: 100
    color: "red"
    MouseArea
    {
        anchors.fill:parent
        onClicked:
        {
            Qt.quit();
        }
    }
}

MouseArea將可視化展現與用戶輸入控制解耦，能夠顯示一個較小的元素，但有一個很大的可交互區域，以便在界面顯示與用戶交互之間找到一個平衡（若是在移動設備上，較小的區域很是不容易被用戶成功點擊。蘋果公司要求界面的交互部分最少要有 40 像素以上，纔可以很容易被手指點中）。

2、FocusScope

Widget.qml文件：

import QtQuick 2.0
 
FocusScope
{
    id: scope
    property alias color: rectangle.color
    x: rectangle.x; y: rectangle.y
    width: rectangle.width; height: rectangle.height
    Rectangle
    {
        id: rectangle
        anchors.centerIn: parent
        color: "lightsteelblue"
        width: 175; height: 30
        radius: 10; antialiasing: true
        Text { id: label; anchors.centerIn: parent }
        focus: true
        Keys.onPressed:
        {
            if (event.key == Qt.Key_A)
                label.text = 'Key A was pressed'
            else if (event.key == Qt.Key_B)
                label.text = 'Key B was pressed'
            else if (event.key == Qt.Key_C)
                label.text = 'Key C was pressed'
        }
    }
    MouseArea
    {
        anchors.fill: parent;
        onClicked: { scope.focus = true }
    }
}

使用Widget組件：

import QtQuick 2.0
 
Rectangle
{
    id: widget
    width: 240; height: 150
    color:"white";
 
    Column
    {
        anchors.centerIn: parent; spacing: 15
        Widget
        {
            color: "lightblue"
        }
        Widget
        {
            focus:true
            color: "palegreen"
        }
    }
}

三、Flickable

QML中提供了一個Flickable元素，能夠將其子項目設置在一個能夠拖曳和彈動的界面上，使得子項目的視圖能夠滾動。Flickable不會自動剪裁它的內容，若是不是將它用做全屏項目，能夠將clip屬性設置爲true來隱藏超出區域的內容。

import QtQuick 2.0
 
Flickable
{
    width: 200; height: 200
    contentWidth: p_w_picpath.width
    contentHeight: p_w_picpath.height
    //interactive: false    //禁止拖動彈動功能
    Image
    {
        id: p_w_picpath
        source: "http://ucenter.51cto.com/avatar.php?uid=9281927&size=middle"
    }
}

4、Flipable

Flipable是一個能夠明顯在其正面和反面之間進行翻轉的項目，同時使用Rotation、State和Transition等元素來產生翻轉效果。front和back分別用來保存要顯示在Flipable項目的正面和反面的項目。Flipable有一個flipped布爾值屬性，每當在Flipable中的MouseArea上單擊鼠標時都會切換該屬性的值。當flipped爲true時，項目變爲back狀態，在這個狀態，Rotation的angle屬性改變爲180°來產生一個翻轉效果。當flipped爲false時，項目恢復到默認狀態，angle的值爲 0。

import QtQuick 2.6
 
Flipable
{
    id: flipable
    width: 240; height:240
    property bool flipped: false
    //正面、反面圖片資源
    front: Image{source: "1.jpg"; anchors.centerIn: parent}
    back: Image{source: "2.jpg"; anchors.centerIn: parent}
    transform: Rotation
    {
        id: rotation
        origin.x: flipable.width / 2
        origin.y: flipable.height / 2
        axis.x: 0; axis.y: 1; axis.z: 0
        angle: 0
    }
    states: State
    {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 } //翻轉效果
        when: flipable.flipped
    }
    transitions: Transition
    {
        NumberAnimation {target: rotation; property: "angle"; duration: 800}
    }
    MouseArea
    {
        anchors.fill: parent
        onClicked: flipable.flipped = !flipable.flipped
    }
}

3、狀態

State 定義一個配置對象和屬性的集合

PropertyChanges 使用一個State描述屬性的改變

StateGroup 包含一個狀態集合和狀態變換

ParentChange 從新定義父集，也就是換個父節點

AnchorChanges 在一個狀態中改變anchors

1、State

import QtQuick 2.0
 
Rectangle
{
    id: rect
    width: 100; height: 100
    color: "black"
    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        onClicked: rect.state == 'clicked' ? rect.state = "" : rect.state = 'clicked';
    }
    // 設置狀態
    states:
    [
        State
        {
            name: "clicked"
            PropertyChanges { target: rect; color: "red" }
        }
    ]
}

2、PropertyChanges

import QtQuick 2.0
 
Text
{
    id: myText
    width: 100; height: 100
    text: "Hello"
    color: "blue"
    states: State
    {
        name: "myState"
        PropertyChanges
        {
            target: myText
            text: "Goodbye"
            color: "red"
        }
    }
    MouseArea
    {
        anchors.fill: parent;
        onClicked: myText.state = 'myState'
    }
}

3、ParentChange

把指定的item換一個item父節點

import QtQuick 2.0
 
Item
{
    width: 200; height: 100
    Rectangle
    {
        id: redRect
        width: 100; height: 100
        color: "red"
    }
    Rectangle
    {
        id: blueRect
        x: redRect.width
        width: 50; height: 50
        color: "blue"
        states: State
        {
            name: "reparented"
            // 改變父節點
            ParentChange
            {
                target: blueRect;
                parent: redRect;
                x: 10; y: 10
            }
        }
        MouseArea
        {
            anchors.fill: parent;
            onClicked: blueRect.state = "reparented"
        }
    }
}

4、AnchorChanges

import QtQuick 2.0
 
Rectangle
{
    id: window
    width: 120; height: 120
    color: "black"
    Rectangle
    {
        id: myRect;
        width: 50;
        height: 50;
        color: "red"
    }
    states: State
    {
        name: "reanchored"
        AnchorChanges
        {
            target: myRect
            anchors.top: window.top
            anchors.bottom: window.bottom
        }
        PropertyChanges
        {
            target: myRect
            anchors.topMargin: 10
            anchors.bottomMargin: 10
        }
    }
    // 鼠標事件
    MouseArea
    {
        anchors.fill: parent;
        onClicked: window.state = "reanchored"
    }
}

4、動畫和變換

Behavior 默認的屬性變換動畫

SequentialAnimation 對定義的動畫串行播放

ParallelAnimation 對定義的動畫並行播放

PropertyAnimation 屬性變換動畫

NumberAnimation 對實數類型屬性進行的動畫

Vector3dAnimation 對QVector3d進行的屬性

ColorAnimation 顏色進行的變換動畫

RotationAnimation 對旋轉進行的變換動畫

ParentAnimation 對父節點進行變換的動畫，改變綁定的父節點

AnchorAnimation 對anchor 進行改變的動畫

PauseAnimation 延遲處理

SmoothedAnimation 容許屬性平滑的過分

SpringAnimation 一種加速的效果

PropertyAction 容許在動畫過程當中對屬性的直接改變

ScriptAction 容許動畫過程當中調用腳本

Transition 在狀態變換中加入動做變化

一、Behavior

一個特定的屬性值改變時要應用一個動畫，可使用一個Behavior爲一個屬性改變指定一個默認的動畫。

import QtQuick 2.0
 
Rectangle
{
    id: rect
    width: 100; height: 100
    color: "red"
    // 針對寬度的動畫
    Behavior on width
    {
        NumberAnimation { duration: 1000 }
    }
 
    MouseArea
    {
        anchors.fill: parent
        onClicked: rect.width = 50
    }
}

二、SequentialAnimation

串行播放多個動畫

Rectangle
{
    id: rect1
    width: 500; height: 500
    Rectangle
    {
        id: rect;
        color: "red"
        width: 100; height: 100
        // 串行播放多個動畫，先橫向移動，在縱向移動
        SequentialAnimation
        {
            running: true;
            NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 }
            NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 }
        }
    }
}

3、ParallelAnimation

import QtQuick 2.0
 
Rectangle
{
    id: rect1
    width: 500; height: 500
    Rectangle
    {
        id: rect;
        color: "red"
        width: 100; height: 100
        // 並行播放動畫，同時橫向和縱向移動
        ParallelAnimation
        {
            running: true;
            NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 }
            NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 }
        }
    }
}

四、PropertyAnimation

一個動畫被應用爲屬性值源（property value source）。

import QtQuick 2.0
 
Rectangle
{
    id: rect
    width: 100; height: 100
    color: "red"
    states: State
    {
        name: "moved"
        PropertyChanges
        {
            target: rect; x: 50
        }
    }
    transitions: Transition
    {
        // 屬性動畫 當屬性 x或y發生變化的時候，就播放這樣一個動畫
        PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
    MouseArea
    {
        anchors.fill: parent;
        onClicked: rect.state = "moved";
    }
}

5、NumberAnimation

import QtQuick 2.0
 
Rectangle
{
    width: 100; height: 100
    color: "red"
    // 對當前item的x進行移動，目標移動到x = 50
    NumberAnimation on x { to: 50; duration: 1000 }
}

6、ColorAnimation

顏色過分

import QtQuick 2.0
 
Rectangle
{
    width: 100; height: 100
    color: "red"
    ColorAnimation on color { to: "yellow"; duration: 1000 }
}

7、RotationAnimation

import QtQuick 2.0
 
Item
{
    width: 300; height: 300
    Rectangle
    {
        id: rect
        width: 150; height: 100; anchors.centerIn: parent
        color: "red"
        smooth: true
        states: State
        {
            name: "rotated";
            PropertyChanges { target: rect; rotation: 180}
        }
        transitions: Transition
        {
            RotationAnimation
            {
                duration: 1000
                direction: RotationAnimation.Counterclockwise
            }
        }
    }
    MouseArea
    {
        anchors.fill: parent;
        onClicked: rect.state = "rotated"
    }
}

8、ParentAnimation

一個切換父節點的動畫,平滑的過分

import QtQuick 2.0
 
Item
{
    width: 200; height: 100
    Rectangle
    {
        id: redRect
        width: 100; height: 100
        color: "red"
    }
 
    Rectangle
    {
        id: blueRect
        x: redRect.width
        width: 50; height: 50
        color: "blue"
        states: State
        {
            name: "reparented"
            ParentChange
            {
                target: blueRect
                parent: redRect
                x: 10; y: 10
            }
        }
        transitions: Transition
        {
            ParentAnimation
            {
                NumberAnimation { properties: "x,y"; duration: 1000 }
            }
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked: blueRect.state = "reparented"
        }
    }
}

9、AnchorAnimation

import QtQuick 2.0
 
Item
{
    id: container
    width: 200; height: 200
    Rectangle
    {
        id: myRect
        width: 100; height: 100
        color: "red"
    }
    states: State
    {
        name: "reanchored"
        AnchorChanges { target: myRect; anchors.right: container.right }
    }
    transitions: Transition
    {
        AnchorAnimation { duration: 1000 }
    }
    // 當控件加載完成後
    Component.onCompleted: container.state = "reanchored"
}

10、PauseAnimation

延遲效果

import QtQuick 2.0
 
Item
{
    id: container
    width: 200; height: 200
    Rectangle
    {
        id: myRect
        width: 100; height: 100
        color: "red"
        SequentialAnimation
        {
            running: true;
            NumberAnimation {target: myRect;to: 50; duration: 1000; properties: "x"; }
            PauseAnimation { duration: 5000 } // 延遲100毫秒
            NumberAnimation {target: myRect; to: 50; duration: 1000; properties: "y"; }
        }
    }
}

11、SmoothedAnimation

平滑過分

import QtQuick 2.0
 
Rectangle
{
    width: 800; height: 600
    color: "blue"
    Rectangle
    {
        width: 60; height: 60
        x: rect1.x - 5; y: rect1.y - 5
        color: "green"
        Behavior on x { SmoothedAnimation { velocity: 200 } }
        Behavior on y { SmoothedAnimation { velocity: 200 } }
    }
    Rectangle
    {
        id: rect1
        width: 50; height: 50
        color: "red"
    }
    focus: true
    Keys.onRightPressed: rect1.x = rect1.x + 100
    Keys.onLeftPressed: rect1.x = rect1.x - 100
    Keys.onUpPressed: rect1.y = rect1.y - 100
    Keys.onDownPressed: rect1.y = rect1.y + 100
}

12、SpringAnimation

平滑的過分過程，在動畫結束的時候有種彈性的效果

import QtQuick 2.0
 
Item
{
    width: 300; height: 300
    Rectangle
    {
        id: rect
        width: 50; height: 50
        color: "red"
        Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
        Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
    }
    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            rect.x = mouse.x - rect.width/2
            rect.y = mouse.y - rect.height/2
        }
    }
}

13、PropertyAction

主要是在動畫過程當中直接的改變一個屬性

import QtQuick 2.0
 
transitions:Transition
{
    ...
    PropertyAction { target: theImage; property: "smooth"; value: true }
    ...
}

14、ScriptAction

import QtQuick 2.0
 
SequentialAnimation
{
    NumberAnimation { ... }
    ScriptAction { script: doSomething(); }
    NumberAnimation { ... }
}

15、Transition

import QtQuick 2.0
 
Rectangle
{
    id: rect
    width: 100; height: 100
    color: "red"
    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
    }
    states: State
    {
        name: "moved"; when: mouseArea.pressed
        PropertyChanges { target: rect; x: 50; y: 50 }
    }
    transitions: Transition
    {
        NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}

5、數據項

Binding 在建立的時候綁定一些數據到一些屬性

ListModel 定義鏈表數據

ListElement 定義ListModel的一個數據項

VisualItemModel 包含可視化項(visual items)到一個view中，至關是一個容器

VisualDataModel 包含一個model和一個delegate，model包含須要的數據，delegate設計顯示的項的信息

Package 把VisualDataModel共享給多個view

XmlListModel 特殊的一個模式使用XPath表達式，使用xml來設置元素

XmlRole XmlListModel的一個特殊的角色

一、Binding

import QtQuick 2.0
 
Item
{
    width: 300; height: 300
    Text {id: app; text: "xxxfa"}
    TextEdit
    { id: myTextField;
        text: "Please type here..."
    }
    // 把myTextField和app的enteredText屬性進行綁定
    Binding
    {
        target: app;
        property: "enteredText";
        value: myTextField.text
    }
}

2、ListModel

import QtQuick 2.0
 
Rectangle
{
    width: 200; height: 200
    ListModel
    {
        id: fruitModel
        ListElement
        {
            name: "Apple"
            cost: 2.45
        }
        ListElement
        {
            name: "Orange"
            cost: 3.25
        }
        ListElement
        {
            name: "Banana"
            cost: 1.95
        }
    }
    Component
    {
        id: fruitDelegate
        Row
        {
            spacing: 10
            Text { text: name }
            Text { text: '$' + cost }
        }
    }
    ListView
    {
        anchors.fill: parent
        model: fruitModel
        delegate: fruitDelegate
    }
}

三、VisualItemModel

import QtQuick 2.0
 
Rectangle
{
    width: 100; height: 100;
    VisualItemModel
    {
        id: itemModel
        Rectangle { height: 30; width: 80; color: "red" }
        Rectangle { height: 30; width: 80; color: "green" }
        Rectangle { height: 30; width: 80; color: "blue" }
    }
    ListView
    {
        anchors.fill: parent
        model: itemModel
    }
}

4、VisualDataModel

import QtQuick 2.0
 
Rectangle
{
    width: 200; height: 100
    VisualDataModel
    {
        id: visualModel
        model: ListModel
        {
            ListElement { name: "Apple" }
            ListElement { name: "Orange" }
        }
        delegate: Rectangle
        {
            height: 25
            width: 100
            Text { text: "Name: " + name}
        }
    }
    ListView
    {
        anchors.fill: parent
        model: visualModel
    }
}

6、視圖

ListView 提供一個鏈表顯示模型試圖

GridView 提供一個網格顯示模型試圖

PathView 提供一個內容沿着路徑來顯示的模型

Path 定義一個PathView使用的軌跡

PathLine 定義一個線性的軌跡

PathQuad 定義一個二次貝塞爾曲線的軌跡

PathCubic 定義一個三次貝塞爾曲線的軌跡

PathAttribute 容許綁定一個屬性上，具體看例子

PathPercent 修改item分配的軌跡不是很明瞭其中的意思

WebView 容許添加網頁內容到一個canvas上

一、GridView

import QtQuick 2.0
 
Rectangle
{
    width: 200; height: 400;
    ListModel
    {
        id: fruitModel
        ListElement
        {
            name: "Apple"
            cost: 2.45
        }
 
        ListElement
        {
            name: "Orange"
            cost: 3.25
        }
 
        ListElement
        {
            name: "Banana"
            cost: 1.95
        }
    }
 
    GridView
    {
        anchors.fill: parent
        model: fruitModel
        delegate: Column
        {
            Text {text:"name" + name}
            Text {text:"cost"+ cost}
        }
    }
}

2、PathView

import QtQuick 2.0
 
Rectangle
{
    width: 200; height: 400;
    ListModel
    {
        id: fruitModel
        ListElement
        {
            name: "Apple"
            cost: 2.45
        }
 
        ListElement
        {
            name: "Orange"
            cost: 3.25
        }
 
        ListElement
        {
            name: "Banana"
            cost: 1.95
        }
    }
    PathView
    {
        anchors.fill: parent
        model: fruitModel
        delegate: Column
        {
            Text {text:"name" + name}
            Text {text:"cost"+ cost}
        }
 
        path:Path
        {
            startX: 120; startY: 100
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }
    }
}

3、PathLine

import QtQuick 2.0
 
Rectangle
{
    width: 200; height: 400;
    ListModel
    {
        id: fruitModel
        ListElement
        {
            name: "Apple"
            cost: 2.45
        }
        ListElement
        {
            name: "Orange"
            cost: 3.25
        }
        ListElement
        {
            name: "Banana"
            cost: 1.95
        }
    }
    PathView
    {
        anchors.fill: parent
        model: fruitModel
        delegate: Column
        {
            Text {text:"name" + name}
            Text {text:"cost"+ cost}
        }
        path:Path
        {
            startX: 150; startY: 120
            PathLine { x: 200; y: 80; }
            PathLine { x: 100; y: 80; }
            PathLine { x: 150; y: 120; }
         }
    }
}

4、PathAttribute

import QtQuick 2.0
 
Rectangle
{
    width: 200; height: 400;
    ListModel
    {
        id: fruitModel
        ListElement
        {
            name: "Apple"
            cost: 2.45
        }
        ListElement
        {
            name: "Orange"
            cost: 3.25
        }
        ListElement
        {
            name: "Banana"
            cost: 1.95
        }
    }
    PathView
    {
        anchors.fill: parent
        model: fruitModel
        delegate:
        Item
        {
            id: delitem;
            width: 80; height: 80;
            Column
            {
                Rectangle
                {
                    width: 40; height: 40;
                    scale: delitem.scale;
                    color: "red"
                }
                Text {text:"name" + name}
                Text {text:"cost"+ cost}
            }
        }
        path: Path
        {
            startX: 120; startY: 100
            PathAttribute { name: "Scale"; value: 1.0 }
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathAttribute { name: "Scale"; value: 0.3 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }
    }
}

5、WebView

import QtQuick 2.0
import QtWebKit 1.0
 
WebView
{
    url: "http://www.nokia.com"
    preferredWidth: 490
    preferredHeight: 400
    scale: 0.5
    smooth: false
}

7、定位器

Column 整理它的子列(縱)

Row 整理它的子行(橫)

Grid 設置它的子到一個網格上

Flow 目的是不讓他的子項重疊在一塊兒

QML提供的多種用於定位的元素叫作定位器，包含在 QtQuick模塊。QML定位器主要有Row、Column、Grid和Flow等。

1、Column

Column將子元素按照加入的順序從上到下，在同一列排列出來。spacing屬性用於定義子元素之間的間隔。

Main.qml文件：

import QtQuick 2.0
 
Rectangle
{
    id: root
    width: 120
    height: 120
    color: "blue"
    Column
    {
        id: row
        anchors.centerIn: parent
        spacing: 8
        Button
        {
            color:"red"
            width:60
            text:"hello"
        }
        Button
        {
            color:"green"
            width: 96
            text:"close"
        }
        Button
        {
            color:"gray"
            width:60
        }
    }
}

2、Row

Row將其子組件放置在一行的位置，既能夠設置從左向右，也能夠設置從右向左，取決於layoutDirection屬性。spacing屬性用於指定子組件之間的間隔。

Main.qml文件：

import QtQuick 2.0
 
Rectangle
{
    id: root
    width: 240
    height: 80
    color: "blue"
    Row
    {
        id: row
        anchors.centerIn: parent
        spacing: 8
        Button
        {
            color:"red"
            width:60
            text:"hello"
        }
        Button
        {
            color:"green"
            width: 96
            text:"close"
        }
        Button
        {
            color:"gray"
            width:60
        }
    }
}

3、Grid

Grid元素將其子元素排列爲一個網格，須要制定rows和columns屬性，也就是行和列的數值。若是兩者有一個不顯式設置，則另一個會根據子元素的數目計算出來。若是設置爲3行，一共放入6個元素，列數會自動計算爲2。flow和layoutDirection屬性則用來控制添加到網格的元素的順序。Grid元素也有spacing屬性。

Main.qml文件：

import QtQuick 2.0
 
Rectangle
{
    id: root
    width: 200
    height: 200
    color: "black"
    Grid
    {
        id: grid
        rows:2
        anchors.centerIn: parent
        spacing: 8
        Button
        {
            color:"red"
            width:60
            text:"hello"
        }
        Button
        {
            color:"green"
            width: 96
            text:"close"
        }
        Button
        {
            color:"gray"
            width:60
        }
    }
}

設定Grid的rows屬性爲2，添加3個子元素，columns屬性會自動計算爲2。

4、Flow

Flow定位器會將其子元素以流的形式顯示出來。使用flow和layoutDirection兩個屬性來控制顯示方式，能夠從左向右橫向佈局，也能夠從上向下縱向佈局。添加到Flow裏面的元素，當Flow的寬度或高度不足時，元素會自動換行。爲了令Flow正確工做，須要指定其寬度或者高度。

Main.qml文件：

import QtQuick 2.0
 
Rectangle
{
    id: root
    width: 200
    height: 200
    color: "black"
    Flow
    {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 8
        Button
        {
            color:"red"
            width:60
            text:"hello"
        }
        Button
        {
            color:"green"
            width: 80
            text:"close"
        }
        Button
        {
            color:"gray"
            width:60
        }
    }
}

三個按鈕組件邊長分別是60，80,60px，整個主窗口的寬是200px，Flow元素外邊距 20px，所以Flow的寬度實際上是 200px – 20px – 20px = 160px。Flow子元素間距爲20px，兩個按鈕組件所佔據的寬度就已經60px + 20px + 80px = 160px，3個則是160px + 20px + 60px = 240px > 200px，默認窗口大小一行只能顯示兩個按鈕組件，第三個按鈕組件自動換行。當拖動改變窗口大小時，能夠觀察Flow元素是如何工做的。若是拖動窗口寬度變長時，第三個按鈕組件將會顯示在第一行，若是拖動拖動窗口寬度變窄時，第2、三個按鈕組件會換行到第二行、第三行。

5、Repeater

Repeater是一個結合定位器一塊兒使用的元素。Repeater像一個for循環，可以遍歷數據模型中的元素。

import QtQuick 2.0
 
Rectangle
{
    id: root
    width: 268
    height: 268
    color: "black"
    property variant colorArray: ["#00bde3", "#67c111", "#ea7025", "#ff0000"]
 
    Grid
    {
        anchors.fill: parent
        anchors.margins: 8
        spacing: 4
        Repeater
        {
            model: 16
            Rectangle
            {
                width: 60; height: 60
                property int colorIndex: Math.floor(Math.random()*4)
                color: root.colorArray[colorIndex]
                border.color: Qt.lighter(color)
                Text
                {
                    anchors.centerIn: parent
                    color: "black"
                    text: "Cell " + index
                }
            }
        }
    }
}

將Repeater同Grid一塊兒使用，Repeater做爲Grid的數據提供者。Repeater的model能夠是任何可以接受的數據模型，而且只能重複基於Item的組件。重複生成16個定義的Rectangle元素。

Repeater會按照model屬性定義的個數循環生成其子元素。每一次循環，Repeater都會建立一個矩形做爲本身的子元素。新生成的矩形的顏色按照Math.floor(Math.random()*3)的算法計算而得。顏色選擇算法會獲得 0，1，2，4四者之一，用於選擇數組colorArray中預約義的顏色。JavaScript是QtQuick 的核心部分，JavaScript標準函數都是可用的。

Repeater會爲每個子元素注入一個index屬性，就是當前的循環索引，能夠在子元素定義中直接使用index屬性。

使用Repeater時，須要注意性能問題。處理很大的數據模型，或者須要動態獲取數據時，Repeater代碼會很是吃力，須要另外的實現。Repeater不適用於處理大量數據或者動態數據，僅適用於少許的靜態數據的呈現。

8、實用項

Connections 明確鏈接信號和信號句柄

Component 封裝QML items 想一個組件同樣

Timer 提供時間觸發器

QtObject 基本的元素只包含objectName屬性

Qt qml全局Qt object提供使用的枚舉和函數

WorkerScript 容許在QML使用線程

Loader 控制載入item或組件

Repeater 使用一個模型建立多個組件

SystemPalette 爲Qt palettes提供一個通道

FontLoader 載入字體根據名字或URL

LayoutItem 容許聲明UI元素插入到qtGraphicsView 佈局中

1、Connections

import QtQuick 2.0
 
Rectangle
{
    width: 100; height: 100;
    MouseArea
    {
        id: area
        anchors.fill: parent;
    }
    Connections
    {
        target: area
        onClicked: { console.log(" ok");}
    }
}

2、Component

import QtQuick 2.0
 
Item
{
    width: 100; height: 100
    Component
    {
        id: redSquare
        Rectangle
        {
            color: "red"
            width: 10
            height: 10
        }
    }
    // 動態的載入一個組件
    Loader { sourceComponent: redSquare }
    Loader { sourceComponent: redSquare; x: 20 }
}

3、Timer

import QtQuick 2.0
 
Item
{
    width: 200; height: 40;
    Timer
    {
        interval: 500; running: true; repeat: true
        onTriggered: time.text = Date().toString() // 使用javascript獲取系統時間
    }
    Text { id: time }
}

4、Repeater

import QtQuick 2.0
 
Row
{
    Repeater
    {
        model: 3
        Rectangle
        {
            width: 100; height: 40
            border.width: 1
            color: "yellow"
        }
    }
}

5、SystemPalette

Rectangle
{
    SystemPalette
    {
        id: myPalette;
        colorGroup: SystemPalette.Active
    }
    width: 640; height: 480
    color: myPalette.window
    Text
    {
        anchors.fill: parent
        text: "Hello!"; color: myPalette.windowText
    }
}

6、FontLoader

Column 
{
    FontLoader { id: fixedFont; name: "Courier" }
    FontLoader { id: webFont; source: "http://www.mysite.com/myfont.ttf" }
    Text { text: "Fixed-size font"; font.family: fixedFont.name }
    Text { text: "Fancy font"; font.family: webFont.name }
}

9、變換

Scale 分派item 縮放行爲

Rotation 分派item 旋轉行爲

Translate 分派item 移動行爲

1、Scale

import QtQuick 2.0
 
Rectangle
{
    width: 100; height: 100
    color: "blue"
    Rectangle
    {
        x: 50; y: 50;
        width: 20; height: 20;
        color: "red"
        transform: Scale { origin.x: 10; origin.y: 10; xScale: 3}
    }
}

2、Rotation

import QtQuick 2.0
 
Rectangle
{
    width: 100; height: 100
    color: "blue"
    // 繞位置25,25 旋轉45度
    transform: Rotation { origin.x: 25; origin.y: 25; angle: 45}
}

3、Translate

import QtQuick 2.0
 
Row
{
    Rectangle
    {
        width: 100; height: 100
        color: "blue"
        // 沿y軸正方向移動20個像素
        transform: Translate { y: 20 }
    }
    Rectangle
    {
        width: 100; height: 100
        color: "red"
        // 沿y軸負方向移動20個像素
        transform: Translate { y: -20 }
    }
}

10、元素佈局

除了定位器，QML 還提供了另一種用於佈局的機制：錨點（anchor）。錨點容許咱們靈活地設置兩個元素的相對位置，使兩個元素之間造成一種相似於錨的關係，也就是兩個元素之間造成一個固定點。錨點的行爲相似於一種連接，它要比單純地計算座標改變動強。錨點描述的是相對位置，在使用錨點時，必須指定兩個元素，聲明其中一個元素相對於另一個元素。錨點是Item元素的基本屬性之一，於是適用於全部QML可視元素。

一個元素有6個主要的錨點的定位線：top、bottom、left、right、horizontalCenter和verticalCenter。對於Text元素，還有一個baseline錨點。每個錨點定位線均可以結合一個偏移的數值。top、bottom、left和right稱爲外邊框；horizontalCenter、verticalCenter和baseline稱爲偏移量。

import QtQuick 2.0
 
Rectangle {
    width: 200
    height: 200
    color: "blue"
    border.color: Qt.lighter(color)
 
    MouseArea
    {
        anchors.fill: parent
        drag.target: parent
    }
}

MouseArea組件是一個用於處理鼠標事件的組件。drag.target: parent說明拖動目標是parent,拖動對象是MouseArea的父組件，即Rectangle組件。anchors.fill設置內部藍色矩形的錨點爲填充（fill），填充的目的對象是parent；anchors.margins: 10表示填充邊距是10px。雖然設置了矩形寬度爲12px，但錨點的優先級要高於寬度屬性設置，因此藍色矩形的實際寬度是100px – 10px – 10px = 80px。

import QtQuick 2.0
 
Rectangle
{
    id: root
    width: 220
    height: 220
    color: "black"
 
    Rectangle
    {
        x: 10
        y: 10
        width: 100
        height: 100
        color:"blue"
        Rectangle
        {
            x:8
            y: 8
            width:60
            height:60
            color:"green"
            anchors.left: parent.left
            anchors.leftMargin: 8
            MouseArea
            {
                anchors.fill: parent
                drag.target: parent
            }
        }
    }
}

anchors.left設置內部綠色矩形的錨點爲父組件的左邊線（parent.left）；左邊距是8px。能夠試着拖動綠色矩形，拖動綠色矩形時，綠色矩形只能沿着距離父組件藍色矩形左邊8px的位置上下移動。

anchors.left: parent.right設置錨點的左側爲父組件的右側

anchors.top: parent.bottom設置錨點的上側爲父組件的底側

anchors.topMargin: 4設置錨點的上側邊距爲4

anchors.horizontalCenter: parent.horizontalCenter設置錨點的水平中心爲父組件的水平中心