QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

本章在QmlBook in chinese中第4章節中的基礎的幾個例子，同時對qml最基礎的東西做個記錄，可能學過qml的小夥伴們基本上可以不用看這篇文章了，都是非常基礎的東西。

第一個例子：效果圖

代碼：

import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle{
    // name this element root
    id:root
    // properties: <name>: <value>
    width: 1020; height: 540

    //color property
    color: "#D8D8D8";

    Image {
        id: rocket
        x:(parent.width - width)/2; y: 40
        source: "assets/background.png"
    }

    Text {
    // un-named element
    // reference element by id
        y: rocket.y + rocket.height + 20
        // reference root element
        width: root.width
        horizontalAlignment: Text.AlignHCenter
        text: 'Rocket'
    }
}

代碼一點一點記錄：

import聲明導入了一個指定的子產品版本。一般來說會導入QtQuick2.0來作為初始元素的引用。
使用//可以單行注釋，使用可以多行注釋，就像C/C++和JavaScript一樣。
每一個QML檔案都需要一個根元素，就像HTML一樣。
一個元素使用它的類型聲明，然後使用{}進行包含。
元素擁有屬性，他們按照name:value的格式來指派。
任何在QML文檔中的元素都可以使用它們的id進行通路（id是一個任意的辨別符）。
元素可以嵌套，這意味着一個父元素可以擁有多個子元素。子元素可以通過通路parent關鍵字來通路它們的父元素

id:root

id是一個非常特殊的屬性值，它在一個QML檔案中被用來引用元素。id不是一個字元串，而是一個辨別符和QML文法的一部分。一個id在一個QML文檔中是唯一的，并且不能被設定為其它值，也無法被查詢（它的行為更像C++世界裡的指針）。

width: 1020; height: 540

一個屬性能夠設定一個值，這個值依賴于它的類型。如果沒有對一個屬性指派，那麼它将會被初始化為一個預設值。你可以檢視特定的元素的文檔來獲得這些初始值的資訊。

color: "#D8D8D8";

表示了一個Rectangle中的顔色，可以采用”#FFFFFF“三個位元組來表示顔色，也可以采用 ”red“ 這樣的文章來輸入。

Image {
        id: rocket
        x:(parent.width - width)/2; y: 40
        source: "assets/background.png"
    }

    Text {
    // un-named element
    // reference element by id
        y: rocket.y + rocket.height + 20
        // reference root element
        width: root.width
        horizontalAlignment: Text.AlignHCenter
        text: 'Rocket'
    }

這裡面有個image 一個 text ，x 是對應的起始位置，source 是圖檔加載的路徑值，horizontalAlignment表示水準中處理方式，這裡是采用了文字中心方式，text: 'Rocket'，名字是Rocket

基礎元素對象

Item（基礎元素對象）是所有可視化元素的基礎對象，所有其它的可視化元素都繼承自Item。它自身不會有任何繪制操作，但是定義了所有可視化元素共有的屬性：

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

矩形框元素（Rectangle Element）

Rectangle（矩形框）是基本元素對象的一個擴充，增加了一個顔色來填充它。它還支援邊界的定義，使用border.color（邊界顔色），border.width（邊界寬度）來自定義邊界。你可以使用radius（半徑）屬性來建立一個圓角矩形。

import QtQuick 2.0

Item {
    width: 200
    height: 320

    Rectangle {
        id: rect1
        x: 12
        y: 12
        width: 76
        height: 96
        color: "lightsteelblue"
    }

    Rectangle {
        id: rect2
        x: 112
        y: 12
        width: 76
        height: 96
        border.color: "lightsteelblue"
        border.width: 4
        radius: 8
    }

    Rectangle {
        id: rect3
        x: 12
        y: 132
        width: 176
        height: 96
        gradient: Gradient {
            GradientStop {
                position: 0.0
                color: "lightsteelblue"
            }
            GradientStop {
                position: 1.0
                color: "slategray"
            }
        }

        border.color: "lightsteelblue"
    }
}

輸出結果：

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

顔色的命名是來自SVG顔色的名稱。你也可以使用其它的方法來指定顔色，比如RGB字元串（'#FF4444'），或者一個顔色名字（例如'white'）。

一個漸變色是由一系列的梯度值定義的。每一個值定義了一個位置與顔色。位置标記了y軸上的位置（0 = 頂，1 = 底）。GradientStop（傾斜點）的顔色标記了顔色的位置。

文本元素（Text Element）

顯示文本你需要使用Text元素（Text Element）。它最值得注意的屬性時字元串類型的text屬性。這個元素會使用給出的text（文本）與font（字型）來計算初始化的寬度與高度。可以使用字型屬性組來（font property group）來改變目前的字型，

例如font.family，font.pixelSize，等等。改變文本的顔色值隻需要改變顔色屬性就可以了。

import QtQuick 2.0

Item {
    width: 400
    height: 120

    Text {
        id: text1
        text: "the quick brown fox"
        color: "#303030"
        font.family: "Ubuntu"
        font.pixelSize: 24
    }
}

輸出結果：

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

跟書中的差不多，可以達到我們的目的。

圖像元素（Image Element）

一個圖像元素（Image Element）能夠顯示不同格式的圖像（例如PNG,JPG,GIF,BMP）。想要知道更加詳細的圖像格式支援資訊，可以檢視Qt的相關文檔。source屬性（source property）提供了圖像檔案的連結資訊，fillMode（檔案模式）屬性能夠控制元素對象的大小調整行為。

import QtQuick 2.0

Rectangle {
    width: 400
    height: 100

    color: "#333333"

    Image {
        x: 12
        y: 12
        // width: 72
        // height: 72
        source: "assets/triangle_red.png"
    }

    Image {
        x: 12 + 64 + 12
        y: 12
        // width: 72
        height: 72 / 2
        source: "assets/triangle_red.png"
        fillMode: Image.PreserveAspectCrop
        clip: true
    }
}

輸出效果:

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

如果把最後兩行語句給注釋掉，就會出現下圖：

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

圖像元素（Image element）使用PreserveAspectCrop可以避免裁剪圖像資料被渲染到圖像邊界外。預設情況下裁剪是被禁用的（clip:false）。你需要打開裁剪（clip:true）來限制邊界矩形的繪制。這對任何可視化元素都是有效的。

滑鼠區域元素（MouseArea Element）

為了與不同的元素互動，你通常需要使用MouseArea（滑鼠區域）元素。這是一個矩形的非可視化元素對象，你可以通過它來捕捉滑鼠事件。當使用者與可視化端口互動時，mouseArea通常被用來與可視化元素對象一起執行指令。

import QtQuick 2.0

Item {

    width: 200
    height: 120

    Rectangle {
        id: rect1
        x: 12
        y: 12
        width: 76
        height: 96
        color: "lightsteelblue"
        MouseArea {
            id: area
            width: parent.width
            height: parent.height
            onClicked: rect2.visible = !rect2.visible
        }
    }

    Rectangle {
        id: rect2
        x: 112
        y: 12
        width: 76
        height: 96
        border.color: "lightsteelblue"
        border.width: 4
        radius: 8
    }
}

結果圖,點選藍色區域，另一個隐藏于顯示:

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

腳本（Scripting）

QML與JavaScript是最好的配合。在JavaScrpit的章節中我們将會更加詳細的介紹這種關系，現在我們隻需要了解這種關系就可以了。

Rectangle {
    width: 240
    height: 120

    Text {
        id: label
        x: 24
        y: 24
        property int spacePresses: 0
        text: 'Space pressed: ' + spacePresses + ' times'

        // handler for text changes
        onTextChanged: console.log('text changed to:', text)

        focus: true

        //(2) handler with some JS
        Keys.onSpacePressed: {
            increment()
        }

        Keys.onEscapePressed: {
            //     label.text = ''
            spacePresses = 0
        }

        function increment() {
            spacePresses = spacePresses + 1
        }
    }
}

效果按空格鍵加，按Esc建變成0：

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

文本改變操作onTextChanged會将每次空格鍵按下導緻的文本改變輸出到控制台。
當文本元素接收到空格鍵操作（使用者在鍵盤上點選空格鍵），會調用JavaScript函數increment()。QmlBook In Chinese

QML文法（QML Syntax）
定義一個JavaScript函數使用這種格式function (){....}，在這個例子中是增加spacePressed的計數。每次spacePressed的增加都會導緻它綁定的屬性更新

屬性（Properties）

元素使用他們的元素類型名進行聲明，使用它們的屬性或者建立自定義屬性來定義。一個屬性對應一個值，例如 width:100，text: 'Greeting', color: '#FF0000'。一個屬性有一個類型定義并且需要一個初始值。

import QtQuick 2.0


Rectangle{
   width: 240
   height: 120
   Text {
       id: thisLabel
       x:24; y:16
       height: 2 * width
       property int times: 24
       property alias anotherTimes: thisLabel.times

       text: "Greeting " + times
       font.family: "Windows"
       font.pixelSize: 24
       KeyNavigation.tab: otherLabel  //按鍵改變

       onHeightChanged: console.log('height ',height) //高度改變後提示
       focus: true
       color: focus?"red":"black"
   }

   Text {
       id: otherLabel
       x: 24
       y: 64
       text: "Other Label"

       font.family: "Ubuntu"
       font.pixelSize: 24
       KeyNavigation.tab: thisLabel
       color: focus?"red":"black"
   }
}

運作效果,按tab鍵可以變換焦點使之變色:

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

已上都是這本書的例子，基礎文法，還是比較簡單的，尤其學過html，css的小夥伴們，這裡不多說了，每天堅持去進步，都會有收獲的。

QmlBook in chinese 程式設計之二 ------（文法與基本元素 basic ）

基礎元素對象

矩形框元素（Rectangle Element）

文本元素（Text Element）

圖像元素（Image Element）

滑鼠區域元素（MouseArea Element）

腳本（Scripting）

屬性（Properties）

繼續閱讀

qt使用QML編譯好的exe程式，脫離開發環境運作方法

【BB10開發】通過編譯QML為二進制代碼來加速啟動兼保護源代碼

錯誤: failed to open stream: 由于連接配接方在一段時間後沒有正确答複或連接配接的主機沒有反應，連接配接嘗試失敗。

[VB.NET]多線程——線程池

最新資料：微信及WeChat月活12.5億多，2021年第二季遊戲收入430億元

取消MFC的自動菜單折疊

新iPhone SE曝光：蘋果啟用新外形

vb6 轉 vb.net

有關 Reliability（可靠性）的一點資料

C++ STL基本容器比較

中國軟體業隻能招超人？？

【IT精英】IT傳奇人物比爾蓋茨的故事

看看牛人們是怎麼評價程式設計語言的

DataTable..::.ToString 方法

Medical Image Analysis Task

寫在工作13周年