技術標籤：Qtqtqml

QML快速入門

【Qt】QML快速入門1——語法：https://blog.csdn.net/See_Star/article/details/113729827
【Qt】QML快速入門2——基本元素：https://blog.csdn.net/See_Star/article/details/113730053
【Qt】QML快速入門3——元件：https://blog.csdn.net/See_Star/article/details/113730209
【Qt】QML快速入門4——簡單轉換：https://blog.csdn.net/See_Star/article/details/113736543
【Qt】QML快速入門5——定位元素：

定位元素（Positioning ELement）

有一些QML元素被用於放置元素物件，它們被稱作定位器，QtQuick模組提供了Row，Column，Grid，Flow用來作為定位器。你可以在下面的插圖中看到它們使用相同內容的顯示效果。

注意：在我們詳細介紹前，我們先介紹一些相關的元素，紅色（red），藍色（blue），綠色（green），高亮（lighter）與黑暗（darker）方塊，每一個元件都包含了一個48乘48的著色區域。下面是關於RedSquare（紅色方塊）的程式碼：

// RedSquare.qml

import QtQuick 2.0

Rectangle {
    width: 48
    height: 48
    color: "#ea7025"
    border.color: Qt.lighter(color)
}

請注意使用了Qt.lighter（color）來指定了基於填充色的邊界高亮色。我們將會在後面的例子中使用到這些元素，希望後面的程式碼能夠容易讀懂。請記住每一個矩形框的初始化大小都是48乘48畫素大小。

目錄

• • 1 Column（列）元素
  • 2 Row（行）元素
  • 3 Grid（柵格）元素
  • 4 FLow（流）元素

1 Column（列）元素

Column（列）元素將它的子物件通過頂部對齊的列方式進行排列。spacing屬性用來設定每個元素之間的間隔大小。

// column.qml

import QtQuick 2.0

DarkSquare {
    id: root
    width: 120
    height: 240

    Column {
        id: column
        anchors.centerIn: parent
        spacing: 8
        RedSquare { }
        GreenSquare { width: 96 }
        BlueSquare { }
    }
}

// M1<<

2 Row（行）元素

Row（行）元素將它的子物件從左到右，或者從右到左依次排列，排列方式取決於layoutDirection屬性。spacing屬性用來設定每個元素之間的間隔大小。

// row.qml

import QtQuick 2.0

BrightSquare {
    id: root
    width: 400; height: 120

    Row {
        id: row
        anchors.centerIn: parent
        spacing: 20
        BlueSquare { }
        GreenSquare { }
        RedSquare { }
    }
}

3 Grid（柵格）元素

Grid（柵格）元素通過設定rows（行數）和columns（列數）將子物件排列在一個柵格中。可以只限制行數或者列數。如果沒有設定它們中的任意一個，柵格元素會自動計運算元專案總數來獲得配置，例如，設定rows（行數）為3，添加了6個子專案到元素中，那麼會自動計算columns（列數）為2。屬性flow（流）與layoutDirection（佈局方向）用來控制子元素的加入順序。spacing屬性用來控制所有元素之間的間隔。

// grid.qml

import QtQuick 2.0

BrightSquare {
    id: root
    width: 160
    height: 160

    Grid {
        id: grid
        rows: 2
        columns: 2
        anchors.centerIn: parent
        spacing: 8
        RedSquare { }
        RedSquare { }
        RedSquare { }
        RedSquare { }
    }

}

4 FLow（流）元素

通過flow（流）屬性和layoutDirection（佈局方向）屬性來控制流的方向。它能夠從頭到底的橫向佈局，也可以從左到右或者從右到左進行佈局。作為加入流中的子物件，它們在需要時可以被包裝成新的行或者列。為了讓一個流可以工作，必須指定一個寬度或者高度，可以通過屬性直接設定，或者通過anchor（錨定）佈局設定。

// flow.qml

import QtQuick 2.0

BrightSquare {
    id: root
    width: 160
    height: 160

    Flow {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        RedSquare { }
        BlueSquare { }
        GreenSquare { }
    }
}

通常Repeater（重複元素）與定位器一起使用。它的工作方式就像for迴圈與迭代器的模式一樣。在這個最簡單的例子中，僅僅提供了一個迴圈的例子。

// repeater.qml

import QtQuick 2.0

DarkSquare {
    id: root
    width: 252
    height: 252
    property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]


    Grid{
        anchors.fill: parent
        anchors.margins: 8
        spacing: 4
        Repeater {
            model: 16
            Rectangle {
                width: 56; height: 56
                property int colorIndex: Math.floor(Math.random()*3)
                color: root.colorArray[colorIndex]
                border.color: Qt.lighter(color)
                Text {
                    anchors.centerIn: parent
                    color: "#f0f0f0"
                    text: "Cell " + index
                }
            }
        }
    }
}

在這個重複元素的例子中，我們使用了一些新的方法。我們使用一個顏色陣列定義了一組顏色屬性。重複元素能夠建立一連串的矩形框（16個，就像模型中定義的那樣）。每一次的迴圈都會建立一個矩形框作為repeater的子物件。在矩形框中，我們使用了JS數學函式Math.floor(Math.random()*3)來選擇顏色。這個函式會給我們生成一個0~2的隨機數，我們使用這個數在我們的顏色陣列中選擇顏色。注意之前我們說過JavaScript是QtQuick中的一部分，所以這些典型的庫函式我們都可以使用。

一個重複元素迴圈時有一個index（索引）屬性值。當前的迴圈索引（0,1,2,…15）。我們可以使用這個索引值來做一些操作，例如在我們這個例子中使用Text（文字）顯示當前索引值。

注意：當有一小部分的靜態資料需要顯示時，使用重複元素是最好的方式。