技術標籤：Qt MOOC系列教程qtc++gui軟體開發程式設計

定位器項是在宣告性使用者介面中管理項位置的容器項。使用定位器可以輕鬆的實現在一個規則的佈局中排版多個專案。

Qt Quick Layouts也可以用於在使用者介面中排列Qt Quick項。它們用於管理宣告性使用者介面上項的位置和大小，非常適合於可調整大小的使用者介面。

1. Row, Column, Grid, Flow

1.1 Row

• 將它的子元素排成一行。

Row用於水平排列專案。下面的示例使用Row在外部彩色Rectangle定義的區域中排列三個帶有圓角的Rectangle。spacing屬性用於設定矩形之間的間距。

我們需要保證父Rectangle物件足夠大，以便在水平居中的Row邊緣周圍留有一些空間。

import QtQuick 2.0

Rectangle {
    width: 320; height: 110
    color: "#c0c0c0"

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { width: 100; height: 100; radius: 20.0
                             color: "#024c1c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                             color: "#42a51c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                             color: "white" }
    }
}
 

1.2 Column

• 將它的子元素排成一列。

Column用於垂直排列專案。下面的示例使用Column在由外部Item定義的區域中排列三個Rectangle。spacing屬性用於設定矩形之間的間距。

import QtQuick 2.0

Item {
    width: 310; height: 170
    
    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle {
            color: "lightblue"; radius: 10.0
            width: 300; height: 50
            Text {
                anchors.centerIn: parent
                font.pointSize: 24; text: "Books"
            }
        }
        Rectangle {
            color: "gold"; radius: 10.0
            width: 300; height: 50
            Text {
                anchors.centerIn: parent
                font.pointSize: 24; text: "Music"
            }
        }
        Rectangle {
            color: "lightgreen"; radius: 10.0
            width: 300; height: 50
            Text {
                anchors.centerIn: parent
                font.pointSize: 24; text: "Movies"
            }
        }
    }
}
 

請注意，由於Column直接繼承自Item，所以如果您需要給它設定一個背景色，那麼必須將其新增到父項Rectangle上。

1.3 Grid

• 以網格的形式定位它的子元素。

Grid用於將專案以網格或表格的形式佈局。下面的示例使用Grid將四個Rectangle佈局在2×2的網格中。與其他定位器一樣，我們可以使用spacing屬性指定專案之間的間距。

import QtQuick 2.0

Rectangle {
    width: 112; height: 112
    color: "#303030"

    Grid {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        columns: 2
        spacing: 6
  
        Rectangle { color: "#aa6666"; width: 50; height: 50 }
        Rectangle { color: "#aaaa66"; width: 50; height: 50 }
        Rectangle { color: "#9999aa"; width: 50; height: 50 }
        Rectangle { color: "#6666aa"; width: 50; height: 50 }
    }
}

在這些專案之間插入的水平和垂直間距是相等的，因此必須在專案本身內新增額外的空間。

Grid中的任何空單元格都必須在適當位置定義佔位符項來建立。

1.4 Flow

• 並排放置它的子元素，根據需要進行換行。

Flow用於在頁面上放置如單詞之類的專案，其中行或列不會重疊。

Flow以類似於Grid的方式排列專案，它先是沿一個軸（短軸）排列成行，然後沿另一個軸（長軸）相鄰放置。Flow的方向以及專案之間的間距由flow和spacing屬性控制。

下面的示例顯示了一個Flow包含著許多Text子項。它們的排列方式與螢幕截圖中顯示的類似。

import QtQuick 2.0

Rectangle {
    color: "lightblue"
    width: 300; height: 200

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Text { text: "Text"; font.pixelSize: 40 }
        Text { text: "items"; font.pixelSize: 40 }
        Text { text: "flowing"; font.pixelSize: 40 }
        Text { text: "inside"; font.pixelSize: 40 }
        Text { text: "a"; font.pixelSize: 40 }
        Text { text: "Flow"; font.pixelSize: 40 }
        Text { text: "item"; font.pixelSize: 40 }
    }
}

Grid和Flow定位器之間的主要區別是，如果Flow中的項在短軸上空間不足時將自動換行，並且如果項的大小不一致，則一行中的項可能不會與另一行中的項對齊。與Grid一樣，它對項之間和項行之間的間距沒有獨立的控制。

2. childrenRect

此只讀屬性儲存項的子元素的集合位置和大小。

如果需要訪問項的子項的集合幾何形狀以正確調整項的大小，則此屬性非常有用。

Source

獲取更多資訊，請關注作者公眾號：程式設計師練兵場